Previeni lo sfarfallio sulla transizione webkit di webkit-transform

Possibile duplicato:
le animazioni di iphone webkit css provocano uno sfarfallio

Per qualche ragione, subito prima che la mia animazione della proprietà di trasformazione del webkit si verifichi, c’è un leggero sfarfallio. Ecco cosa sto facendo:

CSS:

#element { -webkit-transition: -webkit-transform 500ms; } 

JavaScript:

 $("#element").css("-webkit-transform", "translateX(" + value + "px)"); 

Subito prima della transizione, c’è uno sfarfallio. Qualche idea sul perché questo e su come risolvere il problema?

Grazie!

Aggiornamento: questo si verifica solo in Safari. Non succede in Chrome, sebbene l’animazione funzioni.

La soluzione è menzionata qui: iPhone WebKit Le animazioni CSS provocano uno sfarfallio .

Per il tuo elemento, devi impostare

 -webkit-backface-visibility: hidden; 

La regola:

 -webkit-backface-visibility: hidden; 

non funzionerà per sprite o sfondi di immagini.

 body {-webkit-transform:translate3d(0,0,0);} 

avvita sfondi che sono piastrellati.

Preferisco fare una lezione chiamata no-flick e fare questo:

 .no-flick{-webkit-transform:translate3d(0,0,0);} 

Aggiungi questa proprietà css all’elemento da sfarfallare:

 -webkit-transform-style: preserve-3d; 

(E un grande grazie a Nathan Hoad: http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit )

Ho dovuto usare:

 -webkit-perspective: 1000; -webkit-backface-visibility: hidden; 

sull’elemento, o otterrei comunque un flickr la prima volta che si è verificata una transizione dopo il caricamento della pagina

Per una spiegazione più dettagliata, controlla questo post:

http://www.viget.com/inspire/webkit-transform-kill-the-flash/

Eviterei sicuramente di applicarlo a tutto il corpo. La chiave è assicurarsi che qualsiasi elemento specifico che pianifichi di trasformare in futuro inizi a essere renderizzato in 3d, così i browser non devono entrare e uscire dalle modalità di rendering. Aggiunta

 -webkit-transform: translateZ(0) 

(o una delle opzioni già menzionate) all’elemento animato lo realizzerà.

Ho trovato che applicare la -webkit-backface-visibility: hidden; all’elemento di traduzione e -webkit-transform: translate3d(0,0,0); a tutti i suoi bambini, il guizzo poi scompare

Attiva il rendering accelerato dall’hardware per l’elemento problematico. Consiglierei di non farlo su tag *, body o html per le prestazioni.

 .problem{ -webkit-transform:translate3d(0,0,0); } 

Entrambe le risposte sopra citate funzionano per me con un problema simile.

Tuttavia, l’approccio body {-webkit-transform} fa sì che tutti gli elementi della pagina vengano effettivamente visualizzati in 3D. Questa non è la cosa peggiore, ma cambia leggermente il rendering del testo e di altri elementi in stile CSS.

Potrebbe essere un effetto che vuoi. Potrebbe essere utile se stai trasformando molto sulla tua pagina. Altrimenti, -webkit-backface-visibility: nascosto sull’elemento la tua trasformazione è l’opzione meno invasiva.