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

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

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

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

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

Это прекрасно работает

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

КРОМЕ ПЕРВЫЙ время, когда пользователь запускает переход; в первый раз очень заметно мерцание.Я понимаю, что мне не нужно использовать translate3d, так как я перемещаю div влево и вправо, но, насколько я понимаю, это заставляет iPad использовать ускорение GPU. (Это верно?)

Спасибо заранее!

[ОБНОВИТЬ]

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

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

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

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

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

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

почти, но не совсем, незаметный. На iPad это нельзя пропустить).Я имел дело с той же проблемой, и я нашел решение здесь на SO: