Javascript 使用jQuery滚动数据属性时，Safari会在悬停后调整SVG的大小

这似乎是Safari独有的bug，我似乎找不到任何关于它为什么会发生的信息

它只在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>

但是，在第一次悬停时，图像可以工作，但当您滚动时，图像会变小

如果使用jQuery技术或者使用vanilla JS用正则表达式更改src名称，就会发生这种情况

这不会发生在其他图像格式上，我尝试在级联的几乎每个元素上设置不同的100%宽度

来自这些线程的修复似乎不是修复：

也许有人能解释一下为什么会发生这种情况，或者是一种帮助狩猎的技术

您可以在本页的此处以及页脚底部看到它

---

提前谢谢

没有人知道这件事吗？啊！我现在没有时间做这个&^@%**了@Simon_Weaver我不确定我是否理解，你以前有过这个问题？我只是说我现在有这个问题，很惊讶这是一个根本存在的问题。我找到的唯一解决方案是将这两种状态（打开和关闭）作为单独的图像，并隐藏或显示它们。这是一只愚蠢的虫子。我很想看看ios8I中的修复程序现在是否回到了PNG中，在SVG的简单显示得到广泛支持的情况下，看到这个错误有点不幸。

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