css - webkit-transform の webkit-transition でちらつきを防止する

Question

重複の可能性:
iphone webkit css アニメーションでちらつきが発生する

何らかの理由で、webkit-transform プロパティのアニメーションが発生する直前に、わずかなちらつきがあります。これが私がやっていることです：

CSS:

#element {
    -webkit-transition: -webkit-transform 500ms;
}

JavaScript:

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

遷移が発生する直前にちらつきがあります。これがなぜなのか、どうすれば問題を解決できるのでしょうか?

ありがとう！

更新:これは Safari でのみ発生します。アニメーションは機能しますが、Chrome では発生しません。

score 295 · Accepted Answer

あなたの要素のために、あなたは設定する必要があります

-webkit-backface-visibility: hidden;

score 90 · Accepted Answer

ルール：

-webkit-backface-visibility: hidden;

スプライトや画像の背景では機能しません。

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

タイル張りの背景を台無しにします。

私は no-flick と呼ばれるクラスを作成し、これを行うことを好みます:

.no-flick{-webkit-transform:translate3d(0,0,0);}

score 20 · Accepted Answer

詳細な説明については、次の投稿をご覧ください。

全身に塗るのは絶対に避けたいです。重要なのは、将来変換を計画している特定の要素が 3D でレンダリングされることを確認することです。これにより、ブラウザはレンダリングモードを切り替える必要がなくなります。追加する

-webkit-transform: translateZ(0)

(または既に述べたオプションのいずれか) をアニメーション要素に追加すると、これが実現します。

score 17 · Accepted Answer

私は使用しなければなりませんでした：

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

そうしないと、ページの読み込み後に最初にトランジションが発生したときにまだ flickr が表示されます。

score 14 · Accepted Answer

-webkit-backface-visibility: hidden;を翻訳要素と-webkit-transform: translate3d(0,0,0);そのすべての子に適用すると、ちらつきが消えることがわかりました

score 7 · Accepted Answer

問題のある要素のハードウェアアクセラレーションレンダリングをトリガーします。パフォーマンスのために、*、body、またはhtmlタグではこれを行わないことをお勧めします。

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

score 1 · Accepted Answer

上記の2つの回答はどちらも、同様の問題で機能します。

ただし、body {-webkit-transform} アプローチでは、ページ上のすべての要素が効果的に 3D でレンダリングされます。これは最悪の事態ではありませんが、テキストやその他の CSS スタイルの要素のレンダリングがわずかに変わります。

それはあなたが望む効果かもしれません。ページで多くの変換を行っている場合に役立つ場合があります。それ以外の場合、変換する要素の -webkit-backface-visibility:hidden が最も侵襲性の低いオプションです。

8 に答える 8