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

EDIT: ответ от @Archer, похоже, исправляет это. (пожалуйста, проголосуйте за него, потому что у меня недостаточно очков для этого).
чтобы узнать больше об ошибке, нажмите здесь:http://www.viget.com/inspire/webkit-transform-kill-the-flash/

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

прежде чем вы нажмете на демо-ссылку, имейте в виду следующий:

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

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

демо: http://jsfiddle.net/NKQNX/14/

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

7
css-transforms css3 google-chrome jquery webkit

2 ответов

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

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

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

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

11

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

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

0