应用 CSS3 动画时 Chrome 屏幕闪烁（仅第一次）答案

【问题标题】：Chrome screen flash when applying a CSS3 animation (only the first time)应用 CSS3 动画时 Chrome 屏幕闪烁（仅第一次）
【发布时间】：2012-03-23 04:09:44
【问题描述】：

编辑：@Archer 的回答似乎解决了这个问题。（请投票给他，因为我没有足够的积分来做这件事）。
要了解有关该错误的更多信息，请单击此处：http://www.viget.com/inspire/webkit-transform-kill-the-flash/

我的问题不好解释。我在 jsfiddle 上编写了一个测试用例。您可以在本文底部找到链接。

在您点击演示链接之前，请注意以下事项：

确保您使用的是谷歌浏览器。（因为 CSS 中有 -webkit 前缀）。

第一次点击橙色按钮时请注意。在动画开始之前，您应该会看到一种短暂的闪光。当您再次尝试时（单击重置按钮后）一切正常，没有闪烁的屏幕。但是，如果您清除浏览器缓存 (CTRL-SHIFT-DEL)，关闭浏览器，然后重新加载页面，就会再次出现问题。
希望我解释清楚。

演示： http://jsfiddle.net/NKQNX/14/

（对不起我的拼写，英语不是我的第一语言）

【问题讨论】：

标签： jquery google-chrome css webkit css-transforms

【解决方案1】：

显然，这是 webkit 动画的一个已知问题。有点谷歌搜索想出了这个......

body {
    -webkit-transform: translate3d(0, 0, 0);
}

我在您的示例中将其添加到 css 中并尝试了大约 10 次，但一次都没有得到闪烁，而我之前能够始终如一地得到它。

http://jsfiddle.net/NKQNX/16/

【讨论】：

你能链接到错误报告吗？这是我还没有听说过的东西，我很想了解更多关于它的信息。 =)
我只是用谷歌搜索-没有看到任何官方错误报告。上面的代码解决了一个明显的问题。
这是一篇关于该问题的博文：viget.com/inspire/webkit-transform-kill-the-flash
我刚刚尝试了你的方法，从你提供的帖子中很好，但它没有奏效。然而，将它添加到 :before, :after { -webkit-transform: translateZ(0); } 会为我停止闪光，以防其他人遇到这个并说“它不起作用！”

【解决方案2】：

我在较旧的 Chrome 版本中多次看到过这种情况，但最近几周它已得到修复。我正在运行 Chrome 19，但再也看不到这些闪烁了。

我认为它发生在 3d 变换动画时。正如 Archer 指出的那样，通过强制进行 3d 转换可以避免这种情况，因为页面已经在显卡上呈现。

【讨论】：

我也在使用 Chrome 19，但我确实看到了闪光灯。