Chrome で子 Div をスケーリングすると、「overflow: hidden」と「border-radius」を使用して親 Div がオーバーフローするのはなぜですか?

変換: スケールとオーバーフロー: Chrome の隠れた問題

CSS3 の変換: スケールを使用する場合、特有の問題が発生します。親 div に overflow: hidden と border-radius が適用されている場合、子 div をスケーリングすると親を超えて拡張されます。

問題の説明

この問題は次の場合に発生します。 transform:scale を使用して、div 内の画像をズームします。 overflow: hidden と border-radius が親 div に設定されている場合、スケーリングされた画像は境界を越えます。

遷移の問題

当初は、 CSS を移行すると問題が解決します。ただし、このアプローチは効果がないことが判明しました。

解決策

この問題の解決策は、transform:translateZ(0) をラッパー要素に適用することにあります。この CSS プロパティはハードウェア アクセラレーションを強制するため、レンダリング パフォーマンスが向上し、オーバーフローの問題が解消されます。

なぜ機能するのか

transform: translationZ(0) を使用すると、ハードウェア アクセラレーションがトリガーされます。 GPU。ブラウザがレンダリングに専用のグラフィック リソースを利用できるようにします。これにより、変換の効率と精度が向上し、画像がコンテナからはみ出すことがなくなります。

この手法と、transform:translateZ(0) のパフォーマンスへの影響の詳細については、提供されている CSS パフォーマンスに関する記事を参照してください。

以上がChrome で子 Div をスケーリングすると、「overflow: hidden」と「border-radius」を使用して親 Div がオーバーフローするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。