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

Все,

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

Мой класс выглядит следующим образом:

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

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

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

Это отлично работает EXCEPT FIRST, когда пользователь запускает переход; в первый раз наблюдается очень заметное мерцание.

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

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

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

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

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

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

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

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

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

Ответ 1

Все,

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

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

.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/element уже установлены.

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

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

Удачи.

Ответ 2

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

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

-webkit-backface-visibility: hidden;

и, возможно,

-webkit-perspective: 1000;

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

Ответ 3

Мы решили много мерцающих и проблем с шрифтами, установив видовое окно.

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

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

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

Ответ 4

Попробуйте

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

но, как я понимаю, это заставляет iPad использовать ускорение графического процессора.

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

Ответ 5

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

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

Ответ 6

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

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

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