Mengapakah `overflow: hidden` Menggunting Elemen Kanak-kanak Apabila `transform: scale` Digunakan pada Induk?

Mengendalikan Kesan Limpahan dan Zum dengan transformasi: skala

Dalam mengendalikan transformasi CSS3, isu yang membingungkan muncul apabila menggabungkan transformasi: skala dengan limpahan : tersembunyi dan jejari sempadan pada bekas induk. Seperti yang diperhatikan, elemen kanak-kanak nampaknya melangkaui sempadan induknya, menyebabkan limpahan yang tidak sedap dipandang.

Memahami Isu

Tingkah laku pelik ini berpunca daripada fakta bahawa penskalaan melalui transform: skala mempengaruhi saiz yang diberikan elemen tetapi bukan aliran sebenar dalam pepohon paparan. Akibatnya, apabila limpahan: tersembunyi digunakan pada induk, ia cuba menggunting elemen anak berdasarkan saiz asalnya yang tidak berskala. Ini mengakibatkan keratan yang tidak dijangka.

Mencari Penyelesaian: transform: translateZ(0)

Untuk menangani isu ini, teknik prestasi CSS mencadangkan penambahan transformasi: translateZ(0) kepada elemen pembalut. Ini menyebabkan penyemak imbas menganggap elemen sebagai mempunyai ruang pemaparan tiga dimensi, yang menyelesaikan masalah limpahan tanpa mengubah kesan zum yang dimaksudkan.

Sumber Tambahan

Untuk maklumat lebih terperinci tentang implikasi prestasi CSS transformasi: translateZ(0), rujuk sumber berikut:

• [Prestasi CSS: translateZ(0)](https://css-tricks.com /myth-busting-css-performance-translatez-0/)
• [Memahami CSS translateZ Property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform- fungsi/terjemahZ)

Atas ialah kandungan terperinci Mengapakah `overflow: hidden` Menggunting Elemen Kanak-kanak Apabila `transform: scale` Digunakan pada Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!