webkit-transform sovrascrive l’ordinamento z-index in Chrome 13

Aggiornare

Ci scusiamo per non aver aggiunto il dettaglio minore che abbiamo anche stratificato molti elementi div sopra l’altro con z-index . Dopo aver lavorato di più con questo problema, sembra che la webkit-transform del webkit-transform realtà morda con l’ordinamento z-index e che il problema reale non sia correlato alle animazioni stesse.

Fine aggiornamento

Sono attualmente in un progetto in cui sviluppiamo un’applicazione che è piuttosto pesante sulle animazioni CSS3. Stiamo animando un sacco di elementi div in -webkit-transform e -webkit-transition .

Tutto va bene, fino ad oggi dove sono scomparsi tutti gli elementi della pagina da animare. Google Chrome è stato aggiornato da 12.xx a 13.0.782.107m e ora, all’improvviso, le proprietà CSS3 con prefissi di -webkit hanno smesso di funzionare e gli elementi a cui è stata applicata questa proprietà non vengono più visualizzati. La rimozione della proprietà -webkit-transform tramite il debugger di Chrome rende nuovamente visibili gli elementi.

Qualcun altro ha riscontrato gli stessi problemi o sa come risolvere questo problema?

Potrei aggiungere che ho provato a rimuovere solo i prefissi di -webkit (lasciando solo la transform ), che quindi mostra gli elementi mancanti, ma che non animerà affatto gli elementi, poiché la transform proprietà CSS3 non è supportata.

Ho anche provato a usare el.style.webkitTransform e el.style.WebkitTransform , senza successo.

Passerà qualche codice di esempio per spiegare. Il risultato desiderato è spostare sq1 e rivelare sq2 .

 HTML: 
JS /* fetch the element */ var el = document.getElementById("sq1"); /* apply CSS */ el.style["-webkit-transition"] = "-webkit-transform 500ms linear"; el.style["-webkit-transform"] = "translate3d(30px, 30px, 0px)";

Risolto io stesso attraverso prove ed errori. Ho pensato di riferire se qualcun altro si imbattesse in questo problema. Va comunque notato che questo problema non si è verificato prima che Chrome si aggiornasse su Chrome 13 (13.0.782.107m).

Il trucco qui sembra essere quello di aggiungere un’operazione translate3d all’elemento

( sq2 ) sq2 alla dichiarazione (o almeno prima di animare sq1 ).

In caso contrario, l’operazione translate3d sul sovrastante

( sq1 ) causerà il rendering per ignorare lo z-index e posizionare sq1 sotto sq2 . Sto indovinando che questo è perché sq1 è definito prima di sq2 nel DOM, quindi sq2 sarà reso sopra di esso.

Quindi, la soluzione sembra essere quella di mettere translate3d nella definizione di

: s (aggiungilo ad entrambi per essere chiari):

 HTML: 

Questo dovrebbe interessare solo gli elementi posizionati come assoluti o relativi. Per rimediare al problema, puoi applicare la seguente dichiarazione css a ogni elemento posizionato in questo modo e causa problemi:

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

Questo applicherà la trasformazione all’elemento senza effettivamente effettuare una trasformazione, ma influendo sul suo ordine di rendering in modo che sia al di sopra dell’elemento che causa il problema.

Penso che tu debba provare a usare -webkit-transform o webkitTransform invece di webkit-transform .

Utilizzare el.style.WebkitTransform (W maiuscolo).

  el.style["-webkit-transition"] = "-webkit-transform 500ms linear"; el.style["webkit-transform"] = "translate3d(30px, 30px, 0px)"; 

Manca il – sulla seconda riga, questo potrebbe essere il problema.