[解決済み] translateZ(0)に対するCSSのパフォーマンス

質問

多くのブログで、ある要素が3DであるとGPUに認識させるために 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 アクセラレーションを利用する別の方法ですが、これは Safari でのみ機能します。