CSS3 transition / transform / translate3d вызывает сильное мерцание на первом или последнем «кадре» перехода (на iPad)

Question

Все,

Я работаю над веб-приложением специально для iPad и использую переход CSS3 для анимации div (переместите его слева направо).

Мой класс выглядит так:

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

Когда пользователь нажимает кнопку, я делаю это:

var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);

Это прекрасно работает ИСКЛЮЧИТЬ FIRST время, когда пользователь запускает переход;в первый раз наблюдается очень заметное мерцание.

Я понимаю, что мне не нужно использовать translate3d, так как я перемещаю div влево и вправо, но, насколько я понимаю, это заставляет iPadиспользовать ускорение GPU.(Это правильно?)

Заранее большое спасибо!

[ОБНОВЛЕНИЕ]

Я был немного двусмысленным по поводу "мерцания".Короче говоря - я экспериментировал с широким спектром переходов CSS3 (особенно на iPad) и постоянно - заметил заметное мерцание на start или end переход.

Другими словами, сами переходы ОЧЕНЬ гладкие.Однако, в зависимости от точных настроек, перед началом или окончанием перехода появляется заметное мерцание.

Вот еще один пример: у меня есть три фотографии (PNG), накладываемые друг на друга.

Нижний PNG имеет непрозрачность = 1,0, верхние 2 имеют непрозрачность = 0,0.Используя -webkit-keyframes, я могу получать плавные плавные переходы по мере того, как фотографии появляются и исчезают.Когда анимация заканчивается, нижняя фотография заканчивается при непрозрачности = 1.0, две верхние при непрозрачности = 0.0.(Это должно быть их окончательное состояние).

Однако, как только заканчивается анимация, нижняя фотография мигает.Как будто браузер заставляет перерисовывать / перекрашивать экран, и это занимает несколько долей секунды.

Это достаточно плохо, чтобы испортить эффект и сделать переходы непригодными для использования.(На моем iMac это почти , но не совсем, незаметно. На iPad это невозможно пропустить).

Answer 1

Я имел дело с той же проблемой и нашел решение здесь на SO: CSS-анимации iPhone WebKit вызывают мерцание

Это так же просто, как добавить

-webkit-backface-visibility: hidden;

и, возможно,

-webkit-perspective: 1000;

К каждому анимированному объекту. Это сработало для меня, надеюсь, это поможет и вам

Answer 2

Все,

Я не положительный , что это ответ (особенно потому, что само мерцание кажется немного непредсказуемым), но анекдотично, это, кажется, избавляется от этого ...

В любом случае, вот что я делал:

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);

Часто, FIRST раз это быловыполнено, я бы увидел мерцание до начала анимации.Последующие вызовы будут плавно анимироваться.

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

Итак - я сначала попытался установить 3d-координаты div (по сути, когда я впервые строю экран - т.е. инициализацию), передлюбые анимации когда-либо запускаются.

Итак, после этого - когда требуется 3d-анимация, начальные 3d-координаты div / элемента уже установлены.

Это, кажется, устраняет мерцание.

Как я уже сказал - я не уверен, что это надежное и надежное исправление, но оно определенно устранило проблему в моих текущих проектах.

Удачи.

Answer 3

Мы решили многие проблемы с мерцанием и шрифтами, исправив область просмотра.

Ранее у нас был контент, уходящий со страницы (скользящий div), и устройство, казалось, входило в состояние сна, когда область просмотра не была исправлена, из-за необходимости обрабатывать данные вне экрана в сочетании с возможностью масштабирования отображаемый контент.

Этот тег в голове решил наши проблемы.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

Answer 4

Попробуйте

.mover {
    position:absolute;
    -webkit-transition:-webkit-transform 0.4s ease-in-out;
} 

, но, насколько я понимаю, это заставляет iPad использовать ускорение GPU

Оба translate () и translate3d () создают стекконтекст и может использовать слои - текстурные буферы в терминах графического процессора.Поэтому я не думаю, что они действительно имеют какое-либо значение с точки зрения ускорения.

Answer 5

У меня была эта проблема, и я попробовал все рекомендации, приведенные выше. Я только что обнаружил, что z-индекс лица может вызвать проблему.

У меня было 3 панели по 1 средней (плоской) обеим сторонам по углу, как этот \ _ / - средняя мерцала, пока z-индекс был выше или такой же, как у сторон. Перемещение его вниз полностью устраняло мерцание.

Надеюсь, это поможет.

Answer 6

div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

я заметил, что когда у меня было состояние при наведении на div, страница мерцала, даже если к нему не было прикреплено css или js. я не вижу ваш HTML, но это может помочь