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

Question

编辑：@Archer的答案似乎解决了这个问题。 （请投票给他，因为我没有足够的积分来这么做）。
要了解更多关于此bug，请点击这里：http://www.viget.com/inspire/webkit-transform-kill-the-flash/

---

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

在单击演示环节上要注意以下几点：

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

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

DEMO： http://jsfiddle.net/NKQNX/14/

（我的拼写很抱歉，英语不是我的第一语言）

Answer 1

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

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

我补充说，在你的榜样CSS和尝试了约10倍，并没有得到闪烁一次，我在那里能够始终如一地得到它之前。

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

Answer 2

我已经看到了这许多时间在旧的浏览器版本，但随着过去几个星期已经固定。我正在运行Chrome 19，并且没有再看到这些闪烁。

我认为这发生在3d变换动画时。由于Archer指出这是可以避免的，因为该页面已经在图形卡上呈现出来了。