Flash de pantalla de Chrome al aplicar una animación CSS3 (solo la primera vez)

Question

EDITAR: La respuesta de @Archer parece solucionar esto. (Por favor vote, porque no tengo suficientes puntos para hacer eso).
Para obtener más información sobre el error clic aquí: http://www.viget.com/inspire/webkit-transform-kill-the-flash/

---

Mi problema no es fácil de explicar. He inventado un caso de prueba en jsfiddle. Puede encontrar el enlace en la parte inferior de este texto.

Antes de hacer clic en el enlace de demostración, tenga en cuenta lo siguiente:

Asegúrese de que está utilizando Google Chrome. (debido a los prefijos de "webkit "en el CSS).

Preste atención la primera vez que hace clic en el botón naranja. Debería ver una especie de flash breve antes de que comience la animación. Cuando vuelves a intentarlo (después de hacer clic en el botón de reinicio) todo está bien, no hay pantalla parpadeante. Pero si borra la caché de su navegador (CTRL-SHIFT-DEL), cierra el navegador y vuelve a cargar la página, el problema está ahí nuevamente.
Espero haberlo explicado claramente.

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

(lo siento por mi ortografía, Inglés no es mi lengua materna)

Answer 1

Al parecer, se trata de un problema conocido con animaciones WebKit. Un poco de google le ocurrió esta ...

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

que agregó que para el css en su ejemplo y probado unas 10 veces y no consiguió el parpadeo de una vez, cuando yo era capaz de conseguir consistentemente antes de.

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

Answer 2

He visto a este montón de veces en mayor Chrome se basa, pero a partir de las últimas semanas se ha fijado. Estoy ejecutando Chrome 19 y ya no veo estos flashes.

Creo que ocurre cuando una transformación 3D está animada. Al forzar una traducción en 3D como lo ha señalado Archer, se evita esto, ya que la página ya está representada en la tarjeta gráfica.