css z-index hilang setelah webkit mengubah translate3d


98

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.


Bisakah Anda memposting link untuk melihat contohnya?
Littlemad

1
Saya bertemu masalah yang sama. Saya memiliki satu tag <iframe> dengan gaya elemen di dalam "-webkit-transform: translate3d (0,0,0)" untuk memaksa akselerasi 3d. Ternyata bingkai luar dengan indeks-z lebih tinggi selalu disembunyikan oleh elemen iframe di dalamnya. Hanya tersembunyi secara visual, saya bisa "mengklik" pada elemen luar tak terlihat. Ini hanya terjadi di Safari Seluler.
Morgan Cheng

Saya menghabiskan 10 jam untuk mencari tahu bahwa itulah yang membuat kode saya tidak berfungsi. Ugh
Dikeneko

Jawaban:


52

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;.


13
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;.
samy-delux

2
Jadi dalam mode "pertahankan-3d" kita harus menggunakan sumbu z transform untuk mengatur urutan, dan dalam mode datar kita harus menggunakan z-index. Bugnya adalah indeks-z di safari rusak dalam kombinasi dengan transformasi yang dipercepat HW.
Steven Lu

1
tidak bekerja. Hanya berfungsi jika saya menghapus gaya animasi menurut kelas.
fdrv

44

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.


Menggunakan Chrome (35.0.1916.114 m), saya menemukan bahwa jika saya tidak memiliki aturan ini, setelah elemen dibalik [transform: rotateY (180deg)], penangan klik jQuery tidak berfungsi untuk elemen itu lagi. Juga, setelah membalik, ada masalah dengan artefak yang tertinggal di layar dan terutama jika opasitasnya diubah, kecuali translate3d ada! Artikel ini membantu sitepoint.com/fix-chrome-animation-flash-bug
Philip Murphy

2
Ini baru saja menyelesaikan masalah yang sangat sulit bagi saya yang melibatkan dua elemen tetap, satu berisi elemen transformasi 3d. Elemen transformasi 3d pada dasarnya akan meluap dan berada di atas elemen lain sampai perbaikan di atas diterapkan.
Collin James

1
tidak bekerja. Hanya berfungsi jika saya menghapus gaya animasi menurut kelas.
fdrv

12

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


1
Ketika elemen Anda 3d, saya tidak mengharapkan transformasi untuk memberi tekanan ekstra pada GPU. Bagaimanapun juga, perhitungan perlu dilakukan. Apa yang Anda mendasarkan ini?
Micros

7

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


6

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).


tumpukan tidak dapat diklik lagi
clevertension

Hai @Moje, saya juga bertanya-tanya tentang masalah ini. Tumpukan masih tidak bisa diklik lagi.
alchuang

Mengapa saya tidak berpikir untuk menambahkan indeks-z negatif ke elemen yang diterjemahkan? Terima kasih
Akankah

3

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>

2
Ini berhasil untuk saya - terima kasih! Saya menambahkan yang berikut ini ke elemen yang saya inginkan 'di depan': -webkit-transform: translate3d (0, 0, 1px);
Sam Dutton

0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.