8

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

私の問題を説明するのは簡単ではありません。jsfiddleでテストケースを作成しました。このテキストの下部にリンクがあります。

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

あなたがグーグルクロームを使用していることを確認してください。（CSSの-webkitプレフィックスのため）。

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

デモ：http： //jsfiddle.net/NKQNX/14/

（私のスペルは申し訳ありませんが、英語は私の第一言語ではありません）

4

2 に答える 2

12

どうやら、これはWebkitアニメーションの既知の問題です。ちょっとグーグルがこれを思いついた...

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

私はあなたの例のcssにそれを追加し、それを約10回試しましたが、ちらつきは1回も発生しませんでしたが、以前は一貫して取得できました。

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

于 2012-03-05T17:48:00.813 に答える
0

古いChromeビルドでこれを何度も見ましたが、ここ数週間で修正されました。Chrome 19を実行していますが、これらのフラッシュは表示されなくなりました。

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

于 2012-03-05T19:45:10.500 に答える