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

Question

I am using a background-image 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:

HTML:

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

CSS:

.icon{
    background:url(data:image/svg+xml;base64,[data]);
    font-family:sans-serif;
    background-position:top left;
    background-size:cover;
    display:inline-block;
    width:100px;
    height:100px;
    padding:0;
    margin:15px;
    cursor:default;
}

.icon--chat{
    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 background-position instead of percentages
• adding font-family:sans-serif; (i read somewhere that that might fix it - no idea)
• removing margins, box-sizing:border-box;, 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 1

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