iPhone WebKit Le animazioni CSS provocano uno sfarfallio

Questo è il sito iphone: http://www.thevisionairegroup.com/projects/accessorizer/site/

Dopo aver fatto clic su “gioca ora”, si arriva a una partita. Le pistole scorreranno. È ansible far scorrere la borsa e gli accessori su e giù. Puoi vedere che quando ti lasci andare si mettono a posto. Proprio come avviene lo snap, si verifica uno sfarfallio. Le uniche animazioni del webkit che sto usando sono:

'-webkit-transition': 'none' '-webkit-transition': 'all 0.2s ease-out' '-webkit-transform': 'translate(XXpx, XXpx)' 

Scelgo la prima o la seconda transizione in base al fatto che io voglia o meno animarlo, e la trasformazione è l’unico modo in cui muovo le cose.

Il problema più grande però è quando fai clic su “Abbina elementi”, quindi fai clic su “Riproduci di nuovo”. Vedrai mentre le pistole si animano, l’intero sfondo degli accessori / delle borse diventa bianco. Qualcuno può per favore irradiarmi con qualche intuizione sul perché questo sta accadendo?

Ho aggiunto -webkit-backface-visiblity e questo mi ha aiutato soprattutto, ma ho ancora avuto uno sfarfallio iniziale dopo aver ricaricato la pagina. Quando ho aggiunto -webkit-perspective: 1000 , non c’è stato alcun sfarfallio.

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

Prova questo, e speriamo che aiuti:

 #game { -webkit-backface-visibility: hidden; } 
 body {-webkit-transform:translate3d(0,0,0);} 

La vera risposta per il mio caso è qui. Qualcuno era vicino a: -webkit-backface-visibility: hidden; Ma la vera risposta è -webkit-backface-visibility: hidden; deve essere aggiunto al div padre .

Ho avuto anche un problema con una transizione CSS “tremolante”. L’animazione in questione era un menu che scorreva da fuori dallo schermo, e proprio quando l’animazione finiva, l’intero menu lampeggiava / baluginava.

Come si è scoperto, questo è stato causato da una vera e propria funzione iOS, il “touch highlight” , che per qualche motivo ha preso il via dopo che l’animazione CSS è terminata (vale a dire dopo il touch effettivo), e ha evidenziato l’intero menu anziché solo l’elemento quello è stato sfruttato. Ho “risolto” il problema disabilitando completamente il tap-highlight, come descritto qui :

 -webkit-tap-highlight-color: rgba(0,0,0,0); 

La risposta di Michael -webkit-backface-visibility: hidden; ha funzionato quando abbiamo riscontrato questo problema. Avevamo translateZ(0px) sul nostro tag per prevenire un bug di confine di IFRAME iOS 3.1.3 e precedenti e causava lo sfarfallio delle anim. Aggiunta di -webkit-backface-visibility: hidden; ad ogni elemento che abbiamo animato fisso il flicker! Salvavita.

 div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } 

Ho notato che quando avevo uno stato di hover su un div scuoteva la pagina, anche se non avevo alcun css o js collegato ad esso. forse questo aiuta qualcun altro.

Se qualcuno trova che il backface-visibilità non funziona, puoi guardare le proprietà già sul tuo elemento animato. Per noi, abbiamo scoperto che overflow-y: scroll su un elemento posizionato in modo absolute o fixed stava causando un maggiore sfarfallio su iOS.

Semplicemente rimuovendo overflow-y: scroll risolto.

Anche se avevo -webkit-transform-style: preserve-3d; e -webkit-backface-visibility: hidden lo sfarfallio stava ancora accadendo.

Nel mio caso la causa era lo z-index . L’aumento su elemento attivo ha aiutato.

Ecco una nuova soluzione. Stavo impostando l’immagine di sfondo con jQuery e nessuno dei trucchi di rendering 3D funzionava. Così ho provato a usare le classi per definire le proprietà. Ecco! Liscio come il burro

Ciò provoca lo sfarfallio:

 $('#banner').css('backgroundImage', 'url("slide_1.jpg")'; 

Invece:

 $('#banner').attr('class', '.slide-1'); 

con classi definite:

 #banner { -webkit-transition: background-image .25s; } .slide-1 { background-image: url("slide_1.jpg"); } .slide-2 { background-image: url("slide_2.jpg"); } 

Prova questa soluzione . Funziona per me in PhoneGap + jQM 1.4.0 :

Cambia questo

A questo invece:

Maggiori informazioni qui: http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

Avevo passato molto tempo a cercare di capire questo problema per Ember Animated Outlets, PhoneGap e iOS .

Sebbene semplice, dovevo aggiungere uno sfondo a ciascun elemento genitore di primo livello che era incluso nelle animazioni css. In altre parole, assicurati che in nessun punto delle tue visualizzazioni ci sia un elemento che non ha uno sfondo.

La mia configurazione era questa per ogni modello e tutti e tre gli elementi avevano un colore di sfondo assegnato a loro:

Invece di applicare la transizione a “tutti”, specifica solo quello di cui hai veramente bisogno. Ha rimosso lo sfarfallio sul mio caso.

Ho provato tutto quanto sopra e ho ancora avuto grossi problemi di sfarfallio su Firefox e Chrome. L’ho risolto, o almeno lo riducevo notevolmente a un problema accettabile rimuovendo la trasformazione shadow delle caselle che stava causando molti ripetizioni durante l’animazione. L’ho seguito e modificato per i miei bisogni:

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

per me, problema di flickering su safari risolto rimuovendo il will-change: transform; all’elemento animato.

potrei anche risolvere questo problema aggiungendo overflow: hidden; al genitore, ma con questo, tutti gli elementi con transform: translateZ() diventato inefficace

Ho dovuto usare un valore reale (piuttosto che 0):

 .no-flick{ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform:translateZ(0.1px); transform: translateZ(0.1px); /* needs an actual value */ } 

Esempio:

 

Da quello che ho letto , lo sfarfallio è causato dal passaggio del browser tra il rendering dell’hardware e del software. E penso che i produttori di browser siano a conoscenza di yea olde “translate3d (0,0,0)” per forzare il rendering dell’hardware – così ora possono ignorare questi valori falsi.

=> L’utilizzo di un valore reale potrebbe far “attaccare” le cose.

Comunque, ha funzionato per me.

Ho sperimentato lo sfarfallio durante l’esecuzione di una transizione di diapositiva quando si utilizza un browser Web Android predefinito.

Ho usato il seguente css di transizione:

 -webkit-transition: all 2s; -webkit-transform: translate(100%,0); 

Nessuna delle soluzioni menzionate in questa discussione ha contribuito a risolvere il problema. Finalmente ho trovato la soluzione. La fonte del flickering è la parola chiave all che significa eseguire tutte le possibili transizioni. L’ho modificato per eseguire solo la trasformazione e il problema è stato risolto:

 -webkit-transition: -webkit-transform 2s; -webkit-transform: translate(100%,0);