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

编辑：@Archer的答案似乎解决了这个问题。（请投票支持他，因为我的分数不够）。
要了解有关该漏洞的更多信息，请单击此处：

---

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

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

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

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

演示：

---

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

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

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

在你的例子中，我将其添加到css中，并尝试了大约10次，但一次都没有得到闪烁，我以前一直都能得到

---

我在较旧的Chrome版本中看到过很多次，但在最近几周，它已经被修复。我正在运行Chrome19，再也看不到这些闪光了

---

我认为当3d变换设置动画时会发生这种情况。正如Archer指出的那样，通过强制进行3d翻译，这是可以避免的，因为页面已经呈现在图形卡上。

您可以链接到错误报告吗？这是我还没有听说过的东西，我很想多读一些关于它的东西我只是在谷歌上搜索了一下，没有看到任何官方的bug报告。上面的代码修复了一个明显的问题。下面是一篇关于这个问题的博客文章：我刚刚尝试了你的方法，从你提供的文章中可以看出，但是没有成功。但是，将它添加到{code>：before，：after{webkit transform:translateZ（0）；}会为我停止flash，以防其他人看到它并说“它不工作！”我也在使用Chrome 19，但我确实看到了flash