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);
}

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

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

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

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

私たちはなぜその理由を理解したとは思わない。

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

を使用-webkit-transform: translate3d(0,0,0);すると、GPUがCSSトランジションの動作を開始し、スムーズになります（FPSが高くなります）。

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

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

私はそれ-webkit-transform: translate3d(0, 0, 0);が新しいposition: -webkit-sticky;特性を台無しにするという事実を証明することができます。私が作業していた左側のドロワーナビゲーションパターンで、transformプロパティで必要なハードウェアアクセラレーションが、上部のナビゲーションバーの固定位置を混乱させていました。トランスフォームをオフにすると、ポジショニングはうまくいきました。

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

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

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