Странная проблема возникла, когда я разрабатывал HTML5 и CSS3 Calendar Icon . Анимация выглядела великолепно в Firefox и IE, но Chrome и Opera 15+ высветили весь экран белым, когда вы наводили курсор на значок. Возможно, он появляется и в некоторых выпусках Safari.
Эта проблема, похоже, влияет на Chrome в определенных сочетаниях ОС и оборудования. Наведите указатель мыши на значок календаря на демонстрационной странице — видите ли вы вспышку?…
Если вы не видите этого, считайте себя счастливчиком. Вспышка экрана стирает всю страницу, а затем перерисовывает ее через доли секунды — и это происходит каждый раз, когда вы наводите курсор на значок. Прежде чем спросить, установка белого фона не решит проблему!
Эта проблема была поднята на трекере ошибок Chromium в 2011 году. Она была закрыта более года, но неясно, была ли она на самом деле исправлена. Я не испытывал этого раньше, так что, возможно, он снова появился в некоторых инсталляциях.
Вспышка происходит, когда преобразования CSS3, такие как повороты или перекосы, применяются в анимации после события наведения или фокусировки. К сожалению, это не соответствует, поэтому я не могу быть более конкретным.
К счастью, есть простое — если странное — исправить:
#element
{
-webkit-backface-visibility: hidden;
-webkit-transform: scale(1);
} backface-visibility
Кроме того, мне нужно было применить начальное преобразование — подойдет любой тип. Это может быть что-то вроде scale(1)rotate(0deg) Возможно, это инициализирует аппаратное ускорение или другую функцию рендеринга?
Другие разработчики сообщили, что -webkit-transform: translate3D(0, 0, 0); или -webkit-transform-style: preserve-3d; также может работать. Они не для меня, но я подозреваю, что это зависит от анимации страницы и элемента.
Мне будет интересно узнать, есть ли у вас анимационная вспышка в Chrome или Safari и работает ли исправление: попробуйте демонстрационную страницу…
Извиняюсь за немного необычную тему статьи, но я держу пари, что кто-то где-то сегодня будет биться головой об этой проблеме Это скучает по беззаботным дням простых исправлений IE6!