Ответ 1
Решение упомянуто здесь: Анимация iPhone WebKit CSS вызывает мерцание.
Для вашего элемента вам нужно установить
-webkit-backface-visibility: hidden;
Предотвращение мерцания на webkit-переходе webkit-transform
Возможный дубликат:
iphone webkit css анимации вызывают мерцание
По какой-то причине, прямо перед моей анимацией свойства webkit-transform происходит небольшое мерцание. Вот что я делаю:
CSS
#element {
-webkit-transition: -webkit-transform 500ms;
}
JavaScript:
$("#element").css("-webkit-transform", "translateX(" + value + "px)");
Перед переходом происходит мерцание. Любая идея, почему это так, и как я могу решить проблему?
Спасибо!
Обновление: это происходит только в Safari. Это не происходит в Chrome, хотя анимация работает.
Ответы
Ответ 2
Правило:
-webkit-backface-visibility: hidden;
не будет работать для спрайтов или изображений.
body {-webkit-transform:translate3d(0,0,0);}
удаляет фоны, которые выложены плиткой.
Я предпочитаю сделать класс под названием no-flick и сделать это:
.no-flick{-webkit-transform:translate3d(0,0,0);}
Ответ 3
Добавьте это свойство css в мерцающий элемент:
-webkit-transform-style: preserve-3d;
(И большое спасибо Nathan Hoad: http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit)
Ответ 4
Мне пришлось использовать:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
на элементе, или я все равно получаю flickr при первом переходе после загрузки страницы
Ответ 5
Для получения более подробного объяснения ознакомьтесь с этим сообщением:
http://www.viget.com/inspire/webkit-transform-kill-the-flash/
Я бы не стал применять его ко всему телу. Ключ должен удостовериться, что какой-либо конкретный элемент, который вы планируете преобразовать в будущем, запускается в 3d, поэтому браузеру не нужно включать и отключать режимы рендеринга. Добавление
-webkit-transform: translateZ(0)
(или любой из уже упомянутых опций) для анимированного элемента выполнит это.
Ответ 6
Я обнаружил, что, применяя -webkit-backface-visibility: hidden; к переводчику и -webkit-transform: translate3d(0,0,0); ко всем своим дочерним элементам, мерцание затем исчезает
Ответ 7
Функция ускоренного аппаратного ускорения для проблематичного элемента. Я бы советовал не делать этого на тегах *, body или html для производительности.
.problem{
-webkit-transform:translate3d(0,0,0);
}
Ответ 8
Оба этих двух ответа работают для меня с аналогичной проблемой.
Тем не менее, метод body (-webkit-transform) заставляет все элементы на странице эффективно отображаться в 3D. Это не самое худшее, но это немного изменяет рендеринг текста и других элементов в стиле CSS.
Это может быть эффект, который вы хотите. Это может быть полезно, если вы много делаете на своей странице. В противном случае, -webkit-backface-visibility: скрытый на элементе ваш преобразование является наименее инвазивным вариантом.