Вспышка экрана Chrome при применении анимации CSS3 (только в первый раз)

Question

РЕДАКТИРОВАТЬ: Ответ от @Archer, кажется, исправить это.(пожалуйста, проголосуйте за него, потому что у меня недостаточно очков для этого).Чтобы узнать больше об ошибке, нажмите здесь: http://www.viget.com/inspire/webkit-transform-kill-the-flash/

---

Моя проблема не легко объяснить.Я составил контрольный пример на jsfiddle.Вы можете найти ссылку внизу этого текста.

Перед тем, как нажать на демонстрационную ссылку, обратите внимание на следующее:

Убедитесь, что вы используете Google Chrome.(из-за префиксов -webkit в CSS).

Обратите внимание при первом нажатии оранжевой кнопки.Вы должны увидеть какую-то короткую вспышку перед началом анимации.При повторной попытке (после нажатия на кнопку сброса) все ок, не мигает экран.Но если вы очистите кеш браузера (CTRL-SHIFT-DEL), закроете браузер и перезагрузите страницу, сбой снова наступит.
Надеюсь, я объяснил это ясно.

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

(извините за орфографию, английский не мой родной язык)

Answer 1

Судя по всему, это известная проблема с анимацией webkit.Я немного прибегнул к гуглу ...

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

Я добавил это к css в вашем примере и попробовал его примерно 10 раз, но не получил мерцания один раз, где я мог последовательнополучите его раньше.

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

Answer 2

Я видел это много раз в старых сборках Chrome, но за последние несколько недель это было исправлено. Я использую Chrome 19 и больше не вижу этих вспышек.

Я думаю, что это происходит, когда трехмерное преобразование анимировано. Принудительного 3D-перевода, как указал Арчер, этого избежать, так как страница уже визуализирована на видеокарте.