Mengapakah `translate3d` WebKit Memecahkan Penyusunan `z-index` CSS?

WebKit Transform Translate3D Mengganggu CSS Z-Index

Apabila diposisikan secara mutlak, elemen yang bertindih tertakluk kepada susunan z-index, menentukan susunan relatifnya di atas kanvas. Walau bagaimanapun, menggunakan transformasi webkit translate3d untuk animasi mengganggu tingkah laku susun ini. Masalah ini menjejaskan semua penyemak imbas mudah alih utama yang menyokong peralihan webkit.

Memahami Isu

Seperti yang dilaporkan dalam pangkalan data pepijat WebKit (https://bugs.webkit.org /show_bug.cgi?id=61824), menggunakan transformasi 3D pada paksi-z mengatasi nilai indeks-z. Sebabnya terletak pada peralihan daripada satah rendering 2D kepada satah rendering 3D. Dalam ruang 3D, nilai-z menentukan kedudukan elemen, menjadikan indeks-z tidak relevan.

Menyelesaikan Isu

Untuk mengelakkan gangguan ini, seseorang mesti kembali kepada pemaparan 2D untuk elemen anak dengan menggunakan sifat CSS berikut:

transform-style: flat;

Harta ini memastikan bahawa elemen anak kekal dalam satah pemaparan 2D, mengekalkan gelagat tindanan indeks z mereka walaupun selepas transformasi 3D elemen induk.

Atas ialah kandungan terperinci Mengapakah `translate3d` WebKit Memecahkan Penyusunan `z-index` CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!