mistykristie mistykristie - 1 year ago 137
CSS Question

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

I am using a

SVG sprite, and everything looks great on my versions of Safari, mobile Safari, Chrome, Firefox, Opera, IE, etc. However, the background positions aren't displaying correctly for a few of my co-workers who have a newer version of Chrome (I know one of them is using Version 35.0.1916.153 on Mac, some were using a different newer version on Windows).

Here's what it looks like in my version of all browsers:
enter image description here

Here's what it looks like in some newer versions of Chrome:
enter image description here


<span class="icon icon--chat"></span>


background-position:top left;

background-position:0 4%;

The exact same code worked correctly in my co-workers' browsers when I put it on JsFiddle and Codepen, but here it is anyway: http://jsfiddle.net/HgR2N/

Here are a few things I have tried that have not fixed the issue:

  • changing the background image from a data-URI encoded SVG to a
    regular .svg file

  • using pixels for
    instead of percentages

  • adding
    (i read somewhere that that might fix it - no idea)

  • removing margins,
    , etc.

Please let me know if you have any ideas about what might be causing this issue and how I might be able to fix it -- thanks!

Update: I updated my Chrome to Version 35.0.1916.153, so now my co-worker and I are using the exact same version of Chrome for mac and hers are messed up and mine are still fine...

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download