css z-index hilang setelah webkit mengubah translate3d

Saya memiliki dua elemen div yang benar-benar diposisikan yang tumpang tindih. Keduanya telah menetapkan nilai indeks-z melalui css. Saya menggunakan translate3dtransformasi webkit untuk menganimasikan elemen-elemen ini dari layar, dan kemudian kembali ke layar. Setelah transformasi, elemen tidak lagi menghormati z-indexnilai yang ditetapkan .

Adakah yang bisa menjelaskan apa yang terjadi pada z-index / stack-order dari elemen div setelah saya melakukan transformasi webkit pada mereka? Dan jelaskan apa yang dapat saya lakukan untuk menjaga urutan tumpukan elemen div?

Berikut ini beberapa informasi lebih lanjut tentang bagaimana saya melakukan transformasi.

Sebelum transformasi, setiap elemen mendapatkan dua nilai transisi webkit ini yang ditetapkan melalui css (Saya menggunakan jQuery untuk melakukan .css()panggilan fungsi:

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

Elemen tersebut kemudian dianimasikan menggunakan translate3d -webkit-transform:

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

Btw, saya telah mencoba mengatur parameter ke-3 translate3dke beberapa nilai yang berbeda untuk mencoba meniru urutan tumpukan dalam ruang 3d, tetapi tidak berhasil.

Selain itu, browser iPhone / iPad dan Android adalah browser target saya tempat kode ini perlu dijalankan. Keduanya mendukung transisi webkit.

Ini mungkin terkait dengan: https://bugs.webkit.org/show_bug.cgi?id=61824

Pada dasarnya ketika Anda menerapkan transformasi 3D pada sumbu z, indeks-z tidak dapat diperhitungkan lagi (Anda sekarang berada dalam bidang rendering 3 dimensi, gunakan nilai-z yang berbeda). Jika Anda ingin beralih kembali ke rendering 2D untuk elemen anak, gunakan transform-style: flat;.

Ini pasti terkait dengan bug yang dicatat oleh samy-delux. Ini seharusnya hanya memengaruhi elemen apa pun yang diposisikan sebagai absolut atau relatif. Untuk mengatasi masalah tersebut, Anda dapat menerapkan pernyataan css berikut ke setiap elemen yang diposisikan seperti ini dan menyebabkan masalah:

-webkit-transform: translate3d(0,0,0);

Ini akan menerapkan transformasi ke elemen tanpa benar-benar melakukan transformasi, tetapi memengaruhi urutan rendernya sehingga berada di atas elemen yang menyebabkan masalah.

Agak terlambat untuk ini tetapi coba gunakan elemen yang telah kehilangan indeks Z mereka dengan menempatkan yang berikut ini, saya memiliki masalah ketika melakukan beberapa hal paralaks baru-baru ini dan ini membantu secara besar-besaran.

transform-style: preserve-3d;

Ini menghemat penempatan

transform: translate3d(0,0,0);

Pada elemen lain yang memberi tekanan lebih pada GPU

Menunggu untuk melihat contohnya

Sudahkah Anda mencoba melakukan skala transformasi (1)? Saya ingat pernah mengalami masalah serupa, dan saya harus mengatur ulang urutan elemen html, dan menggunakan transformasi yang tidak saya perlukan hanya karena indeks-z dari penggunaan transformasi berubah.

Jika saya tidak salah, setiap kali Anda menggunakan transformasi, itu menjadi indeks-z tertinggi yang tersedia, dan diurutkan oleh elemen html terdekat di awal tag. Jadi dari atas ke bawah.

Saya berharap bantuan ini

z-index akan bekerja melawan div yang ditransformasikan secara 3d jika Anda memberi gaya elemen stackable dengan -webkit-transform: translateZ(0px);

Cuplikan pada codepen -> http://codepen.io/mrmoje/pen/yLIul

Dalam contoh, tombol stack updan stack downkenaikan gaji dan menurunkan z-index footer ini (+/- 1) terhadap elemen diputar (sebuah img dalam hal ini).

Saya belum dapat mereproduksi masalah yang Anda gambarkan di sini. Terlepas dari apa yang saya lakukan, nilai indeks-z dipertahankan selama semua transformasi. Saya menguji menggunakan Chromium (Google Chrome).

Argumen ketiga dari fungsi translate3d memanipulasi sumbu-z elemen. Konsepnya mirip, tetapi tidak persis sama dengan, indeks-z ... Elemen dengan sumbu z yang lebih rendah berada di bawah elemen dengan nilai yang lebih tinggi.

Saya tahu Anda mencoba nilai dari argumen ketiga agar sesuai dengan indeks-z yang Anda inginkan, tetapi masalahnya adalah sumbu-z tampaknya tidak berubah selama animasi CSS3. Dalam contoh berikut, elemen yang di-hover harus berada di atas, tetapi #element_a tetap di atas.

Jika saya menambahkan indeks-z ke pemilih reguler dan: pemilih hover, tampaknya berfungsi dan memungkinkan elemen yang di-hover menjadi paling atas.

Meskipun bukan yang Anda cari, perilaku ini memberikan solusi. Anda hanya perlu menggunakan translate3d dan z-index untuk mengatur urutan rendering awal.

<style>
    div {
        width: 300px;
        height: 150px;
        background-color: white;
        border: 5px outset gray;
        float: left;
        margin: 20px;
        -webkit-transition: 2s;
    }

    #element_a {
        -webkit-transform: translate3d(0, 0, 50px);
    }
    #element_b {
        -webkit-transform: translate3d(0, 0, 100px);
    }

    #element_a:hover {
        -webkit-transform: translate3d(100px, 0, 60px);
    }

    #element_b:hover {
        -webkit-transform: translate3d(-100px, 0, -60px);
    }
</style>
<body>
    <div id="element_a">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
    <div id="element_b">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
</body>

Cara lain untuk menyiasatinya adalah Anda dapat membuat elemen induk dan menerapkan semua transisi lain yang terkait dengannya:

# Apply transitions to a parent div
<div>
  # This image z-index -1 
  <img src="foo"/>

  # This image z-index -3
  <img src="bar"/>

  #This image z-index -2
  <img src="gg"/>
</div>

JsFiddle