Chrome で「transform:scale」がオーバーフローの問題を引き起こすのはなぜですか?

Chrome でのスケールを使用した変換: オーバーフローの謎

CSS3 の transform:scale プロパティを扱う場合、予期せぬ問題が発生します。 overflow: hidden と border-radius を親 div に追加してズーム効果を作成しようとすると、子 div が親の境界を越えて拡張されてしまいます。

この特殊性を解決するには、transform: translationZ(0) プロパティを使用します。ラッパー要素に適用されます。この単純な追加により、スケール変換が期待どおりに動作し、子要素が親要素からオーバーフローするのを防ぐことができます。

この手法は、記事「」で詳しく説明されているように、レンダリング パフォーマンスに対するtranslateZ(0)の影響を利用します。 translationZ(0) と比較した CSS パフォーマンス。」 Z プレーンの使用により、ハードウェア アクセラレーションが効果的にトリガーされ、変換が効率的に実行され、Z プレーンを使用しない場合に発生する不具合が発生することがなくなります。

以上がChrome で「transform:scale」がオーバーフローの問題を引き起こすのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。