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指出這是可以避免的，因爲該頁面已經在圖形卡上呈現出來了。