it-swarm.com.ru

Предотвратить мерцание на webkit-переходе webkit-transform

Возможный дубликат:
анимация css в iphone вызывает мерцание

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

CSS:

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

JavaScript:

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

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

Спасибо!

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

158
devongovett

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

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

-webkit-backface-visibility: hidden;
272
rpitting

Правило:

-webkit-backface-visibility: hidden;

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

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

завинчивает фоны, которые выложены плиткой.

Я предпочитаю сделать класс с именем no-flick и сделать это:

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

Добавьте это свойство css к мерцаемому элементу:

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

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

51
Michael Bar-Sinai

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

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

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

17
Kevin H

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

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

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

-webkit-transform: translateZ(0) 

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

15
Dan Tello

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

11
Adam Carter

Триггерное аппаратное ускорение рендеринга для проблемного элемента. Я бы посоветовал не делать этого с тегами *, body или html для повышения производительности.

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

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

Однако подход body {-webkit-transform} обеспечивает эффективную визуализацию всех элементов на странице в 3D. Это не самая плохая вещь, но она немного меняет визуализацию текста и других элементов в стиле CSS.

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

1
Eric D. Fields