translateZ（0）と比較したCSSパフォーマンス

Question

多くのブログでは、transform: translateZ(0)を使用してアニメーションとトランジションを高速化するために、要素が3Dであると考えるためにGPUを「トリックする」というパフォーマンスの向上が示されています。 、

* { 
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
} 

Answer 1

CSS変換新しいスタッキングコンテキストを作成して、ブロックを含む平易な英語でthe spec.で説明したように、これはそれが一定の意味：私は、次のように変換し、これを適用するの意味合いは、もしあれば、どのようなものだろうでしたそれらに適用された変換を持つ位置要素は、絶対配置された要素のように機能し、z-indexの値は不正になる可能性があります。

this demoを見ると、私の言いたいことが分かります。 2番目のdivには変換が適用されます。つまり、新しいスタッキングコンテキストが作成され、擬似要素は下にではなく上に積み重ねられます。

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

Answer 2

含める場合は、in some scenarios Google Chrome performance is horrible with hardware acceleration enabledです。奇妙なことに、「トリック」を-webkit-transform: rotateZ(360deg);に変更するだけでうまくいきました。

私はこれまで考えなかったのです。

Answer 3

GPUにすべてを送信するモバイルデバイスでは、メモリの過負荷が発生し、アプリケーションがクラッシュします。私はCordovaのiPadアプリでこれを遭遇しました。必要なアイテムをGPUに送信することをお勧めします。あなたが特に移動している部門です。

さらに、3d トランジション トランスフォームを使用して、translateX（50px）のようなアニメーションを左：50px、

Answer 4

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

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

Answer 5

ブラウザはハードウェアアクセラレーションを使用して、デバイスのグラフィック処理ユニット（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/