Анимация iPad css3 мерцает после использования клавиатуры

Question

Я разрабатываю приложение для iPad с использованием HTML5 / CSS3. Я не использую никаких фреймворков и просто использую то, что изначально поддерживается на устройстве. Я создал несколько анимаций css3, чтобы имитировать типичное перемещение iOS влево или вправо при переходе между экранами. Вот пример анимации «Слева влево», использующей аппаратное ускорение iPad в CSS3: (ipad работает с 4.2).

/*************************************************
Slide Left
*************************************************/
.screen.slideleft{
 -webkit-animation-duration: 0.5s;
 -webkit-animation-timing-function: ease-in-out;
}
.screen.slideleft.outgoing{
 z-index: 50 !important;
 -webkit-animation-name: slideleft-outgoing;

}
.screen.slideleft.incoming{
 z-index: 100 !important;
 -webkit-animation-name: slideleft-incoming;
}
@-webkit-keyframes slideleft-outgoing{
 from { -webkit-transform: translate3d(0%,0,0); }
 to { -webkit-transform: translate3d(-100%,0,0); }
}
@-webkit-keyframes slideleft-incoming{
 from { -webkit-transform: translate3d(100%,0,0); }
 to { -webkit-transform: translate3d(0%,0,0); }
}

У меня также есть этот CSS, который я пытался использовать, чтобы исправить мерцание: .incoming, .outgoing{ display: block !important; -webkit-backface-visibility: hidden; }

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

Я искал примеры приложения для iPad на HTML5, которое использует клавиатуру и впоследствии не мерцает, но мало что появилось. Демонстрации jqTouch демонстрируют то же поведение на iPad (хотя я знаю, что они были разработаны для iPhone).

Я поднял несколько постов / вопросов с похожими вопросами, но так и не нашел хорошего ответа. Я прошел через http://css3animator.com/2010/12/fight-the-flicker-making-your-css3-animation-bomb-proof/ и статьи, связанные там, но безуспешно.

Любые другие предложения?

Обновление 1/13 @ 9:00 * 10101 *

Я добавил этот CSS, и он мне очень помог: <pre> .incoming *, .outgoing *{ -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); /* This helps with the flicker a lot. */ }

Элементы переднего плана, кажется, больше не мерцают, но фон все еще остается. Все еще ищете помощь или полезные ресурсы по тактике обработки памяти в Mobile Safari.

Обновление 1/16 @ 11 вечера

Увеличение z-индекса по предложению анонима. Похоже, ничего не изменилось.

Обновление 1/17 @ 8:30 утра

Я опубликовал демо-версию проблемы здесь .

Переходы между экранами работают великолепно ... пока вы не нажмете / не нажмете в одном из полей формы. После скольжения и возврата клавиатуры все переходы мигают. Перейдите по URL-адресу внутри симулятора iOS или реального iPad, чтобы узнать, о чем я говорю.

Answer 1

Это старый вопрос, но я решил поделиться своим опытом.

У меня были проблемы с возмутительным мерцанием (при анимации css3) на iPad (а также на iPhone, но в этом случае только в портретном режиме). Я смог полностью решить все проблемы с мерцанием, установив:

-webkit-perspective: 0; 

На анимированных элементах. Я не уверен, почему это работает, но это работает (протестировано на iOS 4.2+, iPad (1 и 2) и iPhone 4).

Обновление: я только что узнал о проблеме с Chrome при установке значения этого атрибута на 1. Он отлично работает, когда он равен 0, поэтому я соответствующим образом обновил вышеупомянутое.

Answer 2

У меня была такая же проблема, но я смог уменьшить мерцание до почти незаметного, применив описанное здесь и здесь исправление:

http://code.google.com/p/jqtouch/issues/detail?id=301

https://github.com/senchalabs/jQTouch/issues/issue/130

В основном установите z-индекс страницы, которую вы перемещаете, на -1, а после перехода обратно на 1

Answer 3

Я знаю, что это старый вопрос о динозаврах, но есть решение этой проблемы, и оно довольно легкое и очень простое.

document.getElementById('clicked_input').addEventListener('focus', function(e){
    e.stopPropagation();
},false);

Когда я тоже занялся этой проблемой, мне показалось, что я все перепробовал - в конце концов, единственное, что мне помогло, - это создать модальное окно (position: absolute) вне div контейнера приложения, а также установить для div контейнера приложения значение дисплей: ложь; когда клавиатура подходила. Хотя это работало, это было уродливо, я проверил все, чтобы увидеть, что вызвало событие, и казалось, что, когда всплыло «событие фокуса», каждое 3d преобразование портится (в мерцании и производительности).

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

Answer 4

Глядя на ваш источник, translate3d (0,0,0) не применяется до начала перехода?

Попробуйте

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

или

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

Мерцание, вероятно, включает аппаратное ускорение (в настоящее время оно работает только на переведенных в 3d элементах).

Answer 5

У меня недавно была та же проблема, и я попробовал все виды сложных исправлений. В конце концов я обнаружил, что проблема заключалась в стилизации по умолчанию на входе. Я исправил свою проблему, добавив css input{outline:none}. Вероятно, это только состояние фокуса, поэтому input:focus{outline:none;} должно работать.

Answer 6

В конце концов, эта проблема не была устранена.Похоже, что элементы формы в WebKit на iPad вызывают проблемы с мерцанием.

Мой обходной путь состоял в том, что на onblur каждого элемента формы я обновлял страницу, используя хэш-теги, чтобы гарантировать, что она обновилась до точно такого же состояния.Он все еще вызывал «мерцание» во время обновления, но не давал мерцать экрану в остальной части приложения.

Answer 7

Я согласен с Беном, вам, вероятно, следует установить преобразования и для самих классов:

/*************************************************
Slide Left
*************************************************/
.screen.slideleft{
 -webkit-animation-duration: 0.5s;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-transform: translate3d(0,0,0);
}
.screen.slideleft.outgoing{
 z-index: 50 !important;
 -webkit-animation-name: slideleft-outgoing;
 -webkit-transform: translate3d(-100%,0,0);
}
.screen.slideleft.incoming{
 z-index: 100 !important;
 -webkit-animation-name: slideleft-incoming;
 -webkit-transform: translate3d(0,0,0);
}
@-webkit-keyframes slideleft-outgoing{
 from { -webkit-transform: translate3d(0,0,0); }
 to { -webkit-transform: translate3d(-100%,0,0); }
}
@-webkit-keyframes slideleft-incoming{
 from { -webkit-transform: translate3d(100%,0,0); }
 to { -webkit-transform: translate3d(0,0,0); }
}

Если это не сработает, мне было бы интересно проверить, если только перевод X с translateX(-100%) решит проблему. (Не обязательно исправление, потому что у вас нет аппаратного ускорения без 3D-преобразований, но это поможет сузить проблему.)

Answer 8

Тебе не понравится, когда я это говорю, но JavaScript может быть ответом, который ты ищешь.Боюсь, что когда вы поднимаете клавиатуру, процесс рендеринга HTML теряет приоритет.С постоянно обновляемым скриптом, таким как цикл setInterval, у iPad не будет иного выбора, кроме как отображать его в соответствии с планом.Явный код не требует взлома.