Предотвращение мерцания на 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, хотя анимация работает.

Ответ 1

Решение упомянуто здесь: Анимация iPhone WebKit CSS вызывает мерцание.

Для вашего элемента вам нужно установить

-webkit-backface-visibility: hidden;

Ответ 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: скрытый на элементе ваш преобразование является наименее инвазивным вариантом.