将鼠标悬停在Safari中的CSS过渡会减轻某些字体颜色

问题描述：

在我的CSS我定义了一个类的转换。由于某种原因，当我将鼠标悬停在类中时，由于某种原因， transition-duration 会在其他位置改变字体颜色（形成占位符和某些链接）。

In my CSS I defined a transition for a class. For some reason, when I hover over the class with the transition, the transition-duration for some reason alters the font color elsewhere (form placeholders and certain links). (This happens only in Safari as far as I can tell.)

这里有一个jsFiddle显示我在说什么：

Here's a jsFiddle that shows what I'm talking about:

http://jsfiddle.net/EJUhd/

有人知道为什么会发生这种情况，以及如何防止这种情况？

Does anyone know why this occurs and how I can prevent it?

答

对我来说，整个页面中的随机链接变得显而易见（与OSX和反锯齿有关，在Safari中，Chrome（在Windows 7和OSX）以及相同版本的Safari在Windows中工作很好。

I was struggling with a similar issue. For me, random links throughout the page became apparently bold (clearly something to do with OSX and anti-aliasing in Safari, as Chrome (in windows 7 and OSX) as well as the same version of Safari in Windows worked fine.

解决方案并不明显，根据您的操作可能不是最佳的，但添加这行代码可以解决问题：

The solution is not obvious, and depending on what you are doing might not be optimal, but adding this line of code fixed the issue:

-webkit-transform: translateZ(0);

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

This basically triggers the GPU to do animation, and the text no longer had artifacts in my site. Do note that it's not always appropriate to use it, as it may use more battery life and use more resources. Sometimes however, it uses less, so basically check the performance when you add it.

您添加到正常状态：悬停动画状态。

You add this to the normal state not the :hover animated state.

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

$ p>

与：

As opposed to on the:

img:hover { /* not here */ }

副作用是，根据你正在做的动画，它可能会更顺利通过GPU。所以你不会得到你提到的断断续续的动画在你的后续帖子。在我的情况下，动画在safari更加无缝。我做了一个120％的规模和5度旋转的图像与一些框阴影同时出现。在我的情况下，它没有减少CPU使用不幸。

The other very positive side effect is that depending on the animation you are doing, it might be smoother through the GPU. So you won't get the choppy animation you mention in your follow up post. In my case, the animation was more seamless in safari. I was doing a 120% scale and 5 degree rotation of an image with some box-shadow appearing at the same time. In my situation, it did not reduce CPU usage unfortunately.

将鼠标悬停在Safari中的CSS过渡会减轻某些字体颜色

相关推荐