SVG sprite icon background position appears off in newer version of Chrome SVG sprite icon background position appears off in newer version of Chrome google-chrome google-chrome

SVG sprite icon background position appears off in newer version of Chrome


Update: I added preserveAspectRatio="none" as an attribute on the svg tag in the svg file, and that fixed it! More info here: http://www.yootheme.com/support/question/6801?order=modified


I had the same problem. I fixed it by setting the background-size to exact values (not using auto).I originally defined the size of my svg sprite like this:

.icon {    background-image: url("sprite.svg");    background-size: 4em auto;}

I changed it to

.icon {    background-image: url("sprite.svg");    background-size: 4em 99em;}