Вспышка экрана 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/
(извините за мое правописание, английский не мой первый язык)
2 ответов
по-видимому, это известная проблема с анимацией webkit. Немного гуглить придумал это...
body {
-webkit-transform: translate3d(0, 0, 0);
}
Я добавил Это в css в вашем примере и попробовал его около 10 раз и не получил мерцание один раз, где я смог последовательно получить его раньше.
Я видел это много раз в старых сборках Chrome, но в последние несколько недель он был исправлен. Я запускаю Chrome 19 и больше не вижу этих вспышек.
Я думаю, что это происходит, когда в 3D преобразование анимированные. Принудительный 3d-перевод, как указал Арчер, позволяет избежать этого, поскольку страница уже отображается на видеокарте.