Предотвращение мерцания на WebKit-переход WebKit-Transform [дубликат

Question

Возможный дубликат:
iPhone Webkit CSS анимации вызывают мерцание

По какой-то причине, прямо до моей анимации свойства преобразования WebKit-преобразования, есть небольшое мерцание. Вот что я делаю:

CSS:

#element {
    -webkit-transition: -webkit-transform 500ms;
}

JavaScript:

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

Прямо до того, как происходит переход, есть мерцание. Есть идеи, почему это так, и как я могу решить проблему?

Спасибо!

Обновлять: Это происходит только в сафари. Это не происходит в Chrome, хотя анимация делает работу.

Answer 1

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

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

-webkit-backface-visibility: hidden;

Answer 2

Правило:

-webkit-backface-visibility: hidden;

не будет работать для спрайтов или фонов изображения.

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

Винты вверх фона, которые плиткой.

Я предпочитаю сделать класс под названием No-Flick и сделать это:

.no-flick{-webkit-transform:translate3d(0,0,0);}

Answer 3

Добавьте это свойство CSS к мелкаю элементу:

-webkit-transform-style: preserve-3d;

(И большая благодарность Натану Хоад: http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit.)

Answer 4

Я должен был использовать:

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;    

на элементе, или я все равно получил бы Flickr в первый раз, когда переход произошел после нагрузки страницы

Answer 5

Для более подробного объяснения проверьте этот пост:

http://www.viget.com/inspire/webkit-transform-kill-the-flash/

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

-webkit-transform: translateZ(0) 

(или любой из уже упомянутых опций) к анимированному элементу будет выполнять это.

Answer 6

Я обнаружил, что применяя -webkit-backface-visibility: hidden; к переводю элемент и -webkit-transform: translate3d(0,0,0); всем своим детям, мерцание исчезает

Answer 7

Запусковая аппаратное обеспечение ускоренного рендеринга для проблемного элемента. Я бы совет не сделаю это на *, тело или HTML-теги для производительности.

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

Answer 8

Оба вышеупомянутых два ответа работают для меня с аналогичной проблемой.

Однако подход Code {-webkit-Transform} заставляет все элементы на странице эффективно отображаться в 3D. Это не самое худшее, но это немного изменяет рендеринг текста и других элементов CSS-стилизованных.

Это может быть эффект, который вы хотите. Это может быть полезно, если вы делаете много преобразования на вашей странице. В противном случае, -webkit-Backface-Visibility: Hidden На элементе Ваше преобразование является наименее инвазивным вариантом.