悬停转换仅适用于Chrome中的第一个实例

Question

这应该是一件简单的事情：在一个内联列表中有四个链接的SVG，每个SVG在悬停时都有从灰色到颜色的平滑过渡。然而，在Chrome中，只有我列表中的第一个项目会转换，其他项目则不会转换。对于Firefox中的所有项目，转换都能正常工作。

在JS Fiddle上跳转到它，或者查看下面的片段：http://jsfiddle.net/chicgeek/NZpXs/1/

以下是相关的CSS:

.social svg {
  height: 60px;
  width: 60px;
}
.social path {
  fill: #ccc;
  -moz-transition: all .8s linear;
  -webkit-transition: all .8s linear;
  -ms-transition: all .8s linear;
  -o-transition: all .8s linear;
  transition: all .8s linear;
}
.social a:hover path.twitter {
  fill: #4099FF;
}
.social a:hover path.facebook {
  fill: #3B5998;
}
.social a:hover path.github {
  fill: #171515;
}
.social a:hover path.linkedin {
  fill: #0e76a8;
}

标记[截断]：

<section class="social">
  <ul>
    <li><a href="#" target="_blank">
      <svg ...>
      <path class="twitter" d="..."/></svg>
    </a></li>
    <li><a href="#" target="_blank">
      <svg ...>
      <path class="facebook" d="..."></path></svg>
    </a></li>
    <...>
  </ul>
</section>

:hover样式按预期工作，但没有转换。Chrome中的检查器显示.social path选择器很好（它们也都显示fill: #ccc;来确认这一点）。

• 我的选择器有什么问题吗？或者我是如何组合的？（也就是说，我哪里搞砸了？）
• 这是Chrome漏洞吗？如果是，解决方法是什么
• 在我们进行此操作时，我是否仍需要为transition使用供应商前缀？（无论如何，改变这个并不能解决我的问题…）

我已经尽了最大努力在这里搜索现有的问题，以找到解决方案，但运气不佳。欢迎任何帮助！

Answer 1

经过更多的调查，我已经确定这是一个已知的Chrome错误。Chrome似乎在对访问过的链接应用转换时遇到了问题。

对于上面的例子，它总是在隐姓埋名模式下完美地工作。

更多信息：

• CSS3颜色转换在Chrome中不起作用
• Chromium问题101245:一旦链接被访问，CSS转换就不再工作