9

This issue does not present on iOS or on Chrome so it is not a Webkit related issue. It seems to be specific to the latest Safari 6.0.2 on OS X 10.8.2 (and not fixed by 10.8.3 preview build 12D65 which comes with Safari 6.0.3). I shall test on Lion 10.7.5 with Safari 6.0.2 shortly, and will also be testing on preview build 12D68 as well.

http://jsfiddle.net/zrr2b/

Here is a fiddle that makes the problem quite apparent. If you've got a Mac running ML, you should see a significant difference between Chrome and Safari where Safari flickers a lot as you move the mouse around.

基本的に問題は、Safari が 1 つのフレームに対して JS から設定されているターゲット トランスフォームを断続的に描画し、その後遷移アニメーションを続行することです。これによりちらつきが発生しますが、それはトランジションが最初にどこかに移動する途中であった場合のみです。そのため、バグは CSS3 トランジションのほとんどの (非集中的な使用) で醜い頭をもたげることはありませんが、機能または視覚効果がターゲットにスムーズに補間するために依存している場合 (私の現在のプロジェクトのように)、このちらつきは快適ではありません。

-webkit-backface-visibility: hiddenちらつきに関連する同様のトピックを見て、さまざまな親要素にハードウェア アクセラレーションを強制する-webkit-transform-style: preserve-3d、 など、ちらつきを抑えるためにスタイルのほぼすべての組み合わせを適用しましたが、-webkit-perspective: 1000残念ながら、この Safari 固有の問題に対処するものは何もありません。ちらつきの、つまり、白や空白にはちらつきませんが、単一フレームのターゲット変換にちらつきます。

このブランチでは、「通常のちらつき」に役立つが、私には何の効果もない一連のスタイルを設定しているのを見ることができます。http://jsfiddle.net/zrr2b/1/

これは Webkit 固有の問題ではないため、バグ レポートをどこに投稿すればよいかわかりません。これはかなり大きな問題だと思うので、10.8.3 リリースの前にこれを入手できれば特に良いと思います。覚えておいてほしいのは、これは、HTML5 が Flash を完全に殺すために HTML5 に依存しているということです。

アップデート:

  • Mountain Lion 10.8.3 12D68 (Retina Macbook Pro 15.4") の Safari バージョン 6.0.3 (8536.28.10) では、この問題が引き続き発生します。
  • Windows (5.1.7) の Safari では、このバグは発生しません。
  • Lion 10.7.5 (Macbook Air Mid 2011) の Safari バージョン 6.0.2 (7536.26.17) では、このバグは発生しません。
4

1 に答える 1

6

ちらつきを減らす実験にはいくつかの異なる方法があります。しかし、大きな問題は、それらが「ヒットアンドミス」のように見えることです。そのため、問題の解決に役立つものをいくつか試してみる必要があります。

しかし、それらは同じいくつかのことを中心にしています。

-webkit-transform: translateZ(0);  /* triggers GPU, sometimes fixes the issue */
transform: translateZ(0);  /* non-webkit specific */

これでうまくいかない場合は、次のことを試してください。

-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;

これも失敗する場合は、これを試してください。

-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

あなたはW3Cを通してそれらのそれぞれについて読むことができます。しかし、それらはすべて、流動的なアニメーションではなく、いくつかの非常に奇妙なものを含むちらつきのあるアニメーションで、さまざまな状況で私のために働いており、あなたのフィドルよりもはるかにジャンプしています。

彼らはアニメーション化されているdivに入るでしょう。

于 2013-03-07T19:29:11.593 に答える