Ekran Chrome miga podczas stosowania animacji CSS3 (tylko za pierwszym razem)

Question

EDYCJA: Odpowiedź od @Archer wydaje się to naprawić. (proszę, zagłosujcie na niego, ponieważ nie mam wystarczająco dużo punktów, aby to zrobić).
Aby dowiedzieć się więcej na temat błędów kliknij tutaj: http://www.viget.com/inspire/webkit-transform-kill-the-flash/

---

Mój problem nie jest łatwe do wytłumaczenia. Zrobiłem test na Jsfiddle. Możesz znaleźć link na dole tego tekstu.

Zanim klikniesz na link demo zdawać sobie sprawę z następujących czynności:

Pamiętaj używasz Google Chrome. (ze względu na prefiksy -webkit w CSS).

Zwróć uwagę przy pierwszym kliknięciu pomarańczowego przycisku. Powinieneś zobaczyć krótki błysk przed rozpoczęciem animacji. Gdy spróbujesz ponownie (po kliknięciu przycisku resetowania) wszystko jest w porządku, nie ma migającego ekranu. Ale jeśli wyczyścisz pamięć podręczną przeglądarki (CTRL-SHIFT-DEL), zamknij przeglądarkę i ponownie załaduj stronę, czkawka znowu się pojawi.
Mam nadzieję, że wyjaśniłem to wyraźnie.

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

(przepraszam za pisownię, angielski nie jest moim pierwszym językiem)

Answer 1

Najwyraźniej jest to znany problem z animacjami WebKit. Trochę googling wymyślił ten ...

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

I dodał, że do css w Twoim przykładem i próbował go około 10 razy i nie dostał migotania raz, gdzie udało mi się dostać to konsekwentnie przed.

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

Answer 2

Widziałem to wiele razy w starszym Chrome buduje, ale od ostatnich kilku tygodniach został naprawiony. Używam Chrome 19 i nie widzę już tych błysków.

Myślę, że to się dzieje, gdy animacja 3D jest przekształcana. Wymuszając tłumaczenie 3D, jak zauważył Archer, jest to unikane, ponieważ strona jest już renderowana na karcie graficznej.