在我的CSS中,我定义了一个类的转换。由于某种原因,当我将鼠标悬停在课程上,过渡时间由于某些原因改变了其他地方的字体颜色(形式占位符和某些链接)。 (这只发生在Safari中,就我所知。)
这是一个jsFiddle,显示了我在说什么:
有人知道为什么会发生这种情况吗?
解决方法
我正在努力解决类似的问题。
对于我来说,整个页面中的随机链接变得显然是大胆的(显然与OSX有关的操作和Safari中的反锯齿,因为Chrome(在Windows 7和OSX中)以及Windows中的相同版本的Safari工作正常。
对于我来说,整个页面中的随机链接变得显然是大胆的(显然与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使用率。