Problem with SVG sprites in Firefox

[Juribiyan]

SVG icons look blurry in Firefox. It doesn’t happen all the time as it depends on the surrounding elements. Here’s a pen:
http://codepen.io/Juribiyan/pen/zrmyar
The icons in this pen are crafted to fit into 16×16px grid. In FF they look blurry and slightly shifted down. But if you delete the <h3> on line 15, they will look crisp again.
I have also noticed the difference in <use> element’s size. While in Chrome the <use> element is just the size of an icon, in Firefox it is 0.25×0.25px (see pic).
This is a repost of my question on SO: http://stackoverflow.com/questions/35254640/svg-sprites-are-blurry-in-firefox

[Atelierbram]

When one would remove the width and height attibute-value pairs form the svg element, and also then change the style values there into just display: none;, would this make a difference in Firefox? Have you tried this?

[Juribiyan]

Atelierbram,

When one would remove the width and height attibute-value pairs form the svg element

Then the icons will become large.

change the style values there into just display: none;

Then they will disappear.

[Juribiyan]

It seems I have accidently solved this particular problem but it’s just a hack that works but I don’t understand why.
http://codepen.io/Juribiyan/pen/QyJjGp
I have added this:

svg {
  -moz-transform: scale(1);
  position: absolute;
  left: 0; top: 0;
}

Absolute positioning helps getting rid of 1px vertical offset.

[Atelierbram]

Then the icons will become large.

Then they will disappear.

Wrong on both; so you haven’t tried and/or don’t understand see: fork of your demo

[Juribiyan]

Sorry, I’ve misunderstood you. But still, you have to add -moz-transform: scale(1) rule to <svg>‘s.
http://codepen.io/Juribiyan/pen/PZxEeQ
Thanks!

[Author]

Posts