将鼠标悬停在Safari中的CSS过渡会减轻某些字体颜色 [英] Hovering over CSS transition in Safari lightens certain font color

问题描述

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

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

http://jsfiddle.net/EJUhd/

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

解决方案

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

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

  -webkit-transform：translateZ（0）; 
  

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

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

  img {-webkit-transform：translateZ（0）;} 
 

与<：p <$ p

< img：hover {/ * not here * /}


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

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.)

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?

解决方案

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);

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

As opposed to on the:

img:hover { /* not here */ }

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过渡会减轻某些字体颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！