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:
Here's what it looks like in some newer versions of Chrome:
<span class="icon icon--chat"></span>
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
(i read somewhere that that might fix it - no idea)
- removing margins,
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...