translationZ(0) は常に CSS パフォーマンスを向上させますか?

translateZ(0) の CSS パフォーマンスへの影響

translateZ(0) の使用は、効率を向上させるパフォーマンス ハックとして宣伝されています。アニメーションとトランジションの。ただし、この変換を何も考えずに全面的に適用すると、潜在的な結果が生じる可能性があります。

どのような影響がありますか?

translateZ(0) をすべての要素に適用すると、新しいスタッキングが作成されます。コンテキストとそれを含むブロック。これは、変換を伴う固定位置要素が絶対位置要素のように動作することを意味します。さらに、z インデックス値は予期しない動作をする可能性があります。

実際の結果:

このデモで示されているように、要素が 3D 変換を受け取ると、新しい変換が確立されます。コンテキストを積み重ねます。その結果、擬似要素はその内部ではなくその上に配置されます。

推奨事項:

これらの問題を回避するには、3D 変換の使用をパフォーマンスが向上する状況に限定してください。本当に必要とされています。あるいは、スタックの問題を発生させずに 3D アクセラレーションを活用するには、transform: translationZ(0) translation3d(0, 0, 0) の使用を検討してください。ただし、このオプションは Safari でのみサポートされていることに注意してください。

以上がtranslationZ(0) は常に CSS パフォーマンスを向上させますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。