这似乎是Safari独有的错误，我似乎无法找到有关它为何甚至可能发生的任何信息。
仅限Safari，仅使用SVG。
我正在使用jQuery的数据属性翻转技术。
$("img.rollover").hover (->
imgRolloverSwap($(@))
), ->
imgRolloverSwap($(@))
imgRolloverSwap = ($img)->
srcName = $img.attr('src')
$img.attr('src', $img.data('rollover'))
$img.data('rollover', srcName)
SVG嵌入了IMG标签，基本上所做的就是为数据属性中的一个转换出翻转图像。
我的HTML因此：
<div id="social-links">
<a href="https://www.facebook.com/pages/StackCommerce/220449001487225">
<img data-rollover="/assets/img/footer/facebook-rollover.svg" class="rollover" type='image/svg+xml' src="/assets/img/footer/facebook.svg" />
<!-- <img class="rollover" src="/assets/img/footer/facebook.svg" alt="facebook link" target="_blank"> -->
</a>
<a href="https://www.linkedin.com/company/stackcommerce">
<img class="rollover" src="/assets/img/footer/linkedin.svg" alt="linkedin link" target="_blank">
</a>
<a href="https://plus.google.com/u/0/b/104759401634432683234/104759401634432683234/aboute">
<img class="rollover" src="/assets/img/footer/google.svg" alt="google plus link" target="_blank">
</a>
<a href="https://twitter.com/stackcommerce">
<img class="rollover" src="/assets/img/footer/twitter.svg" alt="twitter link" target="_blank">
</a>
</div>
CSS（Sass）是这样的：
#social-links {
@extend .col-xs-12, .col-sm-3, .col-md-2;
a {
@extend .col-xs-3, .col-sm-6;
margin-bottom: 15px;
}
img {
@extend .img-responsive;
}
}
然而，在第一次悬停时图像可以正常工作，但是当您滚动时，图像会变小。
如果你使用jQuery技术或使用vanilla JS用正则表达式更改src名称，就会发生这种情况。
其他图像格式不会发生这种情况，我尝试在级联的几乎每个元素上设置不同的100％宽度。
这些线程的修复似乎没有修复：
SVG resizes on hover in safari only
Scaling/Resizing SVG in an HTML
Rollover SVG images resizing in Safari and IE
也许有人可以说明为什么会这样，或者是一种在Safari中提供帮助的技术？
您可以在此页面上看到它，也可以在页脚底部看到它。
http://beta.stackcommerce.com.s3-website-us-east-1.amazonaws.com/publishers/
提前致谢！