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...

Unaneled

Perhaps you should report it as a bug: code.google.com/p/chromium/issues/list and click on the New Issue button – Pannikin

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

Unaneled

Answer 2

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;
}

Eddyede