「translateZ(0)」は位置決め精度を犠牲にしてパフォーマンスを向上させますか?

translateZ(0) は CSS のパフォーマンスと配置に影響しますか?

ブログでは、transform:translateZ(0) to を使用することによるパフォーマンス上の利点がよく強調されます。 3D 要素の錯覚を作成して、アニメーションとトランジションを高速化します。ただし、この変換を過度に使用することによる潜在的な影響を理解することが重要です。

指定されたコードのようにグローバルに適用される場合:

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

この変換は、すべての要素に対して新しいスタッキング コンテキストを作成します。その結果、この変換を使用した固定位置の要素は絶対位置の要素のように動作し、Z インデックス値が予測不能になる可能性があります。

説明するには、次のデモを考えてみましょう。

<div>
  <div>

このデモでは、変換が適用された 2 番目の div が新しいスタッキング コンテキストを作成します。その結果、その擬似要素は、固定されていない位置にある要素の下ではなく上に表示されます。

したがって、3D 変換は最適化が必要な場合にのみ、控えめに使用することが重要です。 -webkit-font-smoothing: アンチエイリアス;これは、これらの位置決めの問題が発生することなく 3D アクセラレーションを活用するもう 1 つの方法ですが、その互換性は Safari に限定されています。

以上が「translateZ(0)」は位置決め精度を犠牲にしてパフォーマンスを向上させますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。