web-dev-qa-db-ja.com

translateZ（0）に対するCSSのパフォーマンス

いくつかのブログは、transform: translateZ(0)を使用してアニメーションとトランジションを高速化することにより、要素が3Dであると考えるためにGPUを「トリック」することでパフォーマンスが向上することを表明しています。この変換を次の方法で使用することに意味があるのか​​と思いまして。

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
cssperformancecss3translate-animation
91
Ahmed Nuaman

仕様 で説明されているように、CSS変換は新しいスタックコンテキストと包含ブロックを作成します。これは、平易な英語では、変換が適用された固定位置要素が絶対位置要素のように機能することを意味し、z-index値はめちゃくちゃになる可能性があります。

このデモ を見ると、私が何を意味しているかがわかります。 2番目のdivには変換が適用されます。つまり、新しいスタックコンテキストが作成され、擬似要素は下ではなく上にスタックされます。

したがって、基本的にはそうしないでください。最適化が必要な場合にのみ3D変換を適用します。 -webkit-font-smoothing: antialiased;は、これらの問題を発生させずに3Dアクセラレーションを利用するもう1つの方法ですが、Safariでのみ機能します。

95
Dan Eden

含意が必要な場合は、 一部のシナリオでは、Google Chromeのパフォーマンスはハードウェアアクセラレーションを有効にするとひどい です。奇妙なことに、「トリック」を-webkit-transform: rotateZ(360deg);に変更するとうまくいきました。

理由を理解したとは思わない。

25
o.v.

ブラウザがハードウェアアクセラレーションを使用してデバイスのグラフィカル処理ユニット（GPU）にアクセスし、ピクセルを飛ばします。一方、Webアプリケーションはブラウザーのコンテキストで実行されます。これにより、ソフトウェアがレンダリングの大部分（すべてではないにしても）を実行できるようになり、遷移の処理能力が低下します。しかし、Webは追いついており、ほとんどのブラウザベンダーは特定のCSSルールを使用してグラフィカルハードウェアアクセラレーションを提供しています。

-webkit-transform: translate3d(0,0,0);を使用すると、GPUがCSSトランジションのアクションにキックされ、CSSトランジションがスムーズになります（FPSが高くなります）。

注：translate3d(0,0,0)は、表示されるものに関しては何もしません。オブジェクトをx、y、z軸で0px移動します。これは、ハードウェアアクセラレーションを強制する手法にすぎません。

ここをよく読んでください： http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

14
Neo

-webkit-transform: translate3d(0, 0, 0);が新しいposition: -webkit-sticky;プロパティを台無しにするという事実を証明できます。私が取り組んでいた左側の引き出しナビゲーションパターンでは、transformプロパティで必要なハードウェアアクセラレーションが、トップナビゲーションバーの固定された位置を台無しにしていた。変換をオフにすると、ポジショニングは正常に機能しました。

幸いなことに、html要素に-webkit-font-smoothing: antialiasedが含まれていたため、ハードウェアアクセラレーションが既に有効になっているようです。 iOS7とAndroidでこの動作をテストしていました。

7
J. Hogue

すべてをGPUに送信するモバイルデバイスでは、メモリが過負荷になり、アプリケーションがクラッシュします。 CordovaのiPadアプリでこれに遭遇しました。必要なアイテムをGPU、つまり特に移動しているdivにのみ送信するのが最善です。

さらに良いことに、3Dを使用します 遷移 left：50pxではなく、translateX（50px）のようなアニメーションを実行するように変換します。

5
Perry