悬停在Safari中的CSS转换可以减轻某些字体的颜色

在我的CSS中，我定义了一个类的转换。由于某种原因，当我将鼠标悬停在课程上，过渡时间由于某些原因改变了其他地方的字体颜色(形式占位符和某些链接)。 (这只发生在Safari中，就我所知。)

这是一个jsfiddle，显示了我在说什么：

http://jsfiddle.net/EJUhd/

有人知道为什么会发生这种情况吗？

解决方法

我正在努力解决类似的问题。
对于我来说，整个页面中的随机链接变得显然是大胆的(显然与OSX有关的操作和Safari中的反锯齿，因为Chrome(在Windows 7和OSX中)以及Windows中的相同版本的Safari工作正常。

解决方案不是很明显，而且根据您的做法可能不是最佳的，但是添加这行代码可以解决问题：

-webkit-transform: translateZ(0);

这基本上触发GPU进行动画，文本不再在我的网站上有工件。请注意，使用它并不总是适当的，因为它可能会使用更多的电池寿命并使用更多的资源。有时候，它使用较少，所以基本上检查性能，当你添加它。

您将其添加到正常状态，而不是：悬停动画状态。

img { -webkit-transform: translateZ(0); }

相对于：

img:hover { /* not here */ }

另一个非常积极的副作用是根据您正在做的动画，通过GPU可能更平滑。所以你不会得到你在后续的帖子中提到的动画片。在我的情况下，动画在野生动物园更加无缝。我正在做一个120％的比例和5度旋转的图像，同时出现一些盒子阴影。在我的情况下，它并没有减少cpu使用率。