Mengapa Menskala Div Kanak-kanak Melimpahi Div Induk dengan `overflow: hidden` dan `border-radius` dalam Chrome?

Transformasi: Skala dan Limpahan: Isu Tersembunyi dalam Chrome

Apabila bekerja dengan transformasi CSS3: skala, isu pelik timbul. Jika div induk mempunyai limpahan: tersembunyi dan jejari sempadan digunakan, penskalaan div anak menyebabkan ia melampaui induknya.

Penerangan Masalah

Isu berlaku apabila menggunakan transform: skala untuk mengezum imej dalam div. Apabila limpahan: jejari tersembunyi dan sempadan ditetapkan pada div induk, imej berskala melimpah sempadannya.

Isu Peralihan

Pada mulanya, dianggap bahawa menambah Peralihan CSS akan menyelesaikan isu tersebut. Walau bagaimanapun, pendekatan ini terbukti tidak berkesan.

Penyelesaian

Penyelesaian kepada masalah ini terletak pada penggunaan transformasi: translateZ(0) kepada elemen pembalut. Sifat CSS ini memaksa pecutan perkakasan, yang meningkatkan prestasi pemaparan dan menghapuskan isu limpahan.

Mengapa Ia Berfungsi

Menggunakan transformasi: translateZ(0) mencetuskan pecutan perkakasan pada GPU, membolehkan penyemak imbas menggunakan sumber grafik khusus untuk pemaparan. Ini meningkatkan kecekapan dan ketepatan transformasi, menghalang imej daripada melimpahi bekasnya.

Untuk mendapatkan maklumat lanjut tentang teknik ini dan implikasi prestasi transformasi: translateZ(0), rujuk artikel prestasi CSS yang disediakan.

Atas ialah kandungan terperinci Mengapa Menskala Div Kanak-kanak Melimpahi Div Induk dengan `overflow: hidden` dan `border-radius` dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!