使用 Chrome 悬停时白色闪烁/闪烁答案

【问题标题】：White flash/blink on hover with Chrome使用 Chrome 悬停时白色闪烁/闪烁
【发布时间】：2012-06-18 05:10:08
【问题描述】：

我在我设计的网站上遇到了一个相当奇怪的问题。每次您将鼠标悬停在链接内或外时，链接元素以及在某些情况下其父元素都会快速闪烁白色。这发生在每个链接上，而不仅仅是具有过渡效果或不同悬停颜色的链接。在 FF 上，一切正常。另外白色也不是body的bgcolor。

更神秘的是我没有对网站进行任何更改。我只更新了 Chrome..

我也会发布图片，但由于我是新用户，我不允许发布，所以必须将其作为链接： http://www.planetoidi.com/temp/hover.jpg

【问题讨论】：

请分享您的代码以便更好地理解
我不知道要在此处粘贴代码的哪一部分。问题出现在所有页面中，我刚才注意到，即使我选择和取消选择文本，它也会闪烁白色。无论如何，这是一个元素的基本代码：a{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } a, a:visited{ color: $link; text-decoration: none; } 抱歉，格式很糟糕，我正在尝试找到换行符 :)
我还查看了我之前创建的一些网站，其中一些显示了相同的症状（他们以前从未这样做过）。还有一些网站运行良好，所以我想我需要找出它们的不常见之处。
你可以在这里创建一个例子jsfiddle.net
这只是一些小故障，通过重启修复。有点奇怪..我会尽快回答并关闭它。

【解决方案1】：

这是由 Chrome 中的一大类错误引起的，这些错误在转换到加速渲染或从加速渲染转换时会显示闪烁（白色或黑色，具体取决于错误）。当从非悬停状态发生 CSS 转换时，悬停时可能会发生这种情况。

一种解决方法是确保元素的基本状态是使用加速渲染。一种方法是为您的元素添加以下规则（没有 :hover 选择器）：

-webkit-backface-visibility: hidden;

【讨论】：