Предотвратить мерцание на webkit-переход webkit-transform [дубликат]

Question

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

586 8

css css-transforms css-transitions

8 ответов:

Comments

Ничего не найдено.

rpitting · Accepted Answer · 2017-05-23 15:18:24

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

для вашего элемента, вам нужно установить
-webkit-backface-visibility: hidden;

ablemike · Accepted Answer · 2011-10-12 02:55:05

правила:
-webkit-backface-visibility: hidden;
не будет работать для спрайтов или фонов изображений.
body {-webkit-transform:translate3d(0,0,0);}
винты фоны, которые выложены плиткой.

Я предпочитаю сделать класс под названием no-flick и сделать это:
.no-flick{-webkit-transform:translate3d(0,0,0);}

Michael Bar-Sinai · Accepted Answer · 2016-11-28 02:28:45

добавьте это свойство css к мерцающему элементу:
-webkit-transform-style: preserve-3d;
(и большое спасибо Натан Hoad: http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit)

Kevin H · Accepted Answer · 2012-03-09 20:50:32

Я должен был использовать:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;    
на элементе, или я все равно получу flickr В первый раз, когда переход произошел после загрузки страницы

Dan Tello · Accepted Answer · 2012-01-20 23:32:36

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

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

Я бы определенно избегал применять его ко всему телу. Ключ состоит в том, чтобы убедиться, что любой конкретный элемент, который вы планируете преобразовать в будущем, начинает отображаться в 3d, поэтому браузеры не должны переключаться в режимы рендеринга и выходить из них. Добавление
-webkit-transform: translateZ(0) 
(или любой из уже упомянутых вариантов) чтобы анимированный элемент выполнил это.

Adam Carter · Accepted Answer · 2013-01-03 00:14:12

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

dontmentionthebackup · Accepted Answer · 2012-11-12 16:38:48

запуск аппаратно ускоренного рендеринга для проблемного элемента. Я бы посоветовал не делать этого на*, body или HTML-тегах для производительности.
.problem{
  -webkit-transform:translate3d(0,0,0);
}

Eric D. Fields · Accepted Answer · 2011-07-15 17:26:14

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

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

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