Предотвращение мерцания на WebKit-переход WebKit-преобразования

147

Можно создать дубликат:
iphone webkit css animations cause flicker Предотвращение мерцания на WebKit-переход WebKit-преобразования

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

CSS:

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

JavaScript:

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

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

Спасибо!

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

источник

2010-08-11 devongovett

Я заметил самую проблему в iOS 4.2 beta 2. – rpitting

происходит для меня на FF версии 17.0 сейчас ... с масштабированными объектами, которые масштабируются за пределами размера окна – vsync

Поведение всегда в Chrome в некоторых случаях ... –

257

Решение упомянуто здесь: iPhone WebKit CSS animations cause flicker.

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

-webkit-backface-visibility: hidden;

источник

2010-10-13 08:21:46 rpitting

+11

Мои переходы затрагивали другие элементы на сайте, и мне в итоге пришлось добавьте правило ко всем элементам сайта. – mlunoe

Работал и для меня. У меня было скрытое меню, которое подталкивало содержимое вниз с помощью анимации CSS, когда оно было показано. Применяя приведенное выше правило к моему основному содержанию div, которое следовали за скрытым меню, я исправил свою проблему без существенного влияния на производительность. NB: Когда я применил его к моему глобальному правилу HTML, он сделал анимацию CSS немного хуже, остерегайтесь! – Primus202

Использование селектора подстановочных знаков для этого свойства фактически вызвало дополнительное мерцание от других элементов. Мое рабочее решение состояло в том, чтобы выборочно применять свойство к элементам, которые были переведены. – hlfcoding

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

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

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

источник

2011-07-07 14:08:00

Правило:

-webkit-backface-visibility: hidden;

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

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

удаляет фоны, которые выложены плиткой.

Я предпочитаю, чтобы сделать класс не называется не-Флик и сделать это:

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

источник

2011-10-11 23:55:05 ablemike

Вы правы, исправление обратной видимости не работает на фоне изображений. Благодарю. – ppcano

Обратите внимание, что при использовании translate3d (0,0,0) _anywhere_ Chrome теперь разбивает любую фоновую позицию: обложка, которую вы можете или не можете иметь. – Norris

Awww, yeeeaaah. Как масло. – gfullam

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

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

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

-webkit-transform: translateZ(0)

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

источник

2012-01-20 21:32:36

Это сработало после ввода фактического значения в: transform: translateZ (0.1px) – bob

мне пришлось использовать:

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

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

источник

2012-03-09 18:50:32

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

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

источник

2012-11-12 14:38:48

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

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

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

источник

2012-12-21 17:27:27

Мне нужно было использовать это, чтобы заставить вещи перестать мерцать. – matthewpavkov

Life saver! Благодарю. обратная видимость: скрытая; не работал для меня. Это было :-) –

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

источник

2013-01-02 22:14:12

Предотвращение мерцания на WebKit-переход WebKit-преобразования

ответ

Смежные вопросы