Chrome screen flash quando si applica un'animazione CSS3 (solo la prima volta)

Question

MODIFICA: La risposta di @Archer sembra risolvere questo problema. (per favore votatelo, perché non ho abbastanza punti per farlo).
Per saperne di più sul bug clicca qui: http://www.viget.com/inspire/webkit-transform-kill-the-flash/

---

Il mio problema non è facile da spiegare. Ho inventato un test su jsfiddle. Puoi trovare il link in fondo a questo testo.

Prima di fare clic sul link demo essere a conoscenza di quanto segue:

Assicurarsi che si sta utilizzando Google Chrome. (a causa dei prefissi di -webkit nel CSS).

Prestare attenzione la prima volta che si fa clic sul pulsante arancione. Dovresti vedere una sorta di breve flash prima che inizi l'animazione. Quando provi di nuovo (dopo aver cliccato sul pulsante di reset) tutto è ok, nessuna schermata lampeggiante. Ma se si cancella la cache del browser (CTRL-MAIUSC-DEL), si chiude il browser e si ricarica la pagina, il problema è di nuovo presente.
Spero di averlo spiegato chiaramente.

DEMO: http://jsfiddle.net/NKQNX/14/

(dispiace per la mia ortografia, inglese non è la mia prima lingua)

Answer 1

A quanto pare, si tratta di un problema noto con animazioni WebKit. Un po 'di googling si avvicinò con questo ...

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

ho aggiunto che al css nel tuo esempio e provato circa 10 volte e non ha ottenuto il guizzo, una volta, dove sono stato in grado di ottenere in modo coerente essa prima.

http://jsfiddle.net/NKQNX/16/

Answer 2

Ho visto questo molte volte in più vecchio Chrome si basa, ma come delle ultime settimane è stato risolto. Sto utilizzando Chrome 19 e non vedo più questi flash.

Penso che ciò accada quando viene animata una trasformazione 3D. Forzando una traduzione in 3d come ha fatto notare Archer, ciò viene evitato, poiché la pagina è già visualizzata sulla scheda grafica.