mistykristie mistykristie - 2 months ago 10
CSS Question

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

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:
enter image description here

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

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

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

Comments