title: SVG sprite icon background position appears off in newer version of Chrome
body: <p>I am using a <code>background-image</code> 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).</p>
  
  <p>Here's what it looks like in my version of all browsers:
  <img src="https://i.stack.imgur.com/6m12q.png" alt="enter image description here"></p>
  
  <p>Here's what it looks like in some newer versions of Chrome:
  <img src="https://i.stack.imgur.com/EgJ6N.png" alt="enter image description here"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span class="icon icon--chat"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p>The exact same code worked correctly in my co-workers' browsers when I put it on JsFiddle and Codepen, but here it is anyway: <a href="http://jsfiddle.net/HgR2N/" rel="noreferrer">http://jsfiddle.net/HgR2N/</a></p>
  
  <p>Here are a few things I have tried that have not fixed the issue:</p>
  
  <ul>
  <li>changing the background image from a data-URI encoded SVG to a
  regular .svg file</li>
  <li>using pixels for <code>background-position</code> instead of percentages</li>
  <li>adding <code>font-family:sans-serif;</code> (i read somewhere that that might fix it - no idea)</li>
  <li>removing margins, <code>box-sizing:border-box;</code>, etc.</li>
  </ul>
  
  <p>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!</p>
  
  <p>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...</p>