在较新版本的Chrome中,SVG精灵图标背景位置显示为关闭

我正在使用background-imageSVG精灵,在我的Safari,移动版Safari,Chrome,Firefox,Opera,IE等版本上,一切看起来都不错.但是,我的一些同事的背景位置无法正确显示一个较新版本的Chrome(我知道其中一个在Mac上使用的是版本35.0.1916.153,有些在Windows上使用了不同的新版本).

这是我在所有浏览器版本中的样子:

以下是一些较新版本Chrome的外观:

HTML:

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

当我把它放在JsFiddle和Codepen上时,完全相同的代码在我的同事的浏览器中正常工作,但无论如何它在这里:http://jsfiddle.net/HgR2N/

以下是我尝试过的一些没有解决问题的方法:

将背景图像从数据URI编码的SVG更改为常规的.svg文件

使用像素background-position代替百分比

添加font-family:sans-serif;(我读到某处可能会修复它 - 不知道)

去掉边距box-sizing:border-box;等

如果您对可能导致此问题的原因以及如何解决问题有任何疑问,请与我们联系 - 谢谢!

更新:我将我的Chrome更新到版本35.0.1916.153,所以现在我的同事和我正在使用完全相同版本的Chrome for mac,而她的混乱,我的仍然很好......