CSS3アニメーションを適用するとChrome画面が点滅（初回のみ）

Question

編集：@Archerの答えはこれを修正するようです。 （私はそれを行うのに十分なポイントがないので、彼に投票してください）。 http://www.viget.com/inspire/webkit-transform-kill-the-flash/

---

私の問題は、説明するのは容易ではありません。こちらをクリックしてくださいバグの詳細については、
。私はjsfiddleでテストケースを作った。このテキストの下にリンクがあります。

はデモのリンクをクリックする前に、次の点に注意してください。

は、あなたがGoogleのクロムを使用していることを確認してください。 （CSSの-webkit接頭辞のため）。

初めてオレンジ色のボタンをクリックするときに注意してください。アニメーションが始まる前に一種の短いフラッシュが見えるはずです。再度（リセットボタンをクリックした後に）再試行すると、すべてが正常で、点滅する画面はありません。しかし、ブラウザのキャッシュ（CTRL-SHIFT-DEL）をクリアしてブラウザを閉じ、ページをリロードすると、そのような問題が再発します。
私はそれをはっきり説明したいと思う。

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

（私の綴りのため申し訳ありませんが、英語は私の最初の言語ではありません）

Answer 1

はどうやら、それはWebKitのアニメーションの既知の問題です。グーグルのビットはこの思い付いた...

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

私はあなたの例では、CSSにあることを追加し、それを約10倍を試してみましたが、私はそれを一貫して得ることができた場合は、一度ちらつきを取得できませんでした前。私は古いChromeで倍のこのたくさん見てきました

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

Answer 2

ビルドが、最後の数週間のように、固定されています。私はChrome 19を使用していますが、これらの点滅はもう表示されません。

3Dトランスフォームがアニメーション化されていると思います。 Archerが指摘しているように、ページを既にグラフィックスカードにレンダリングしているので、3D変換を強制することにより、これは回避されます。