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

Ответ 1

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

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

Ответ 2

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

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

-webkit-perspective: 0; 

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

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

Ответ 3

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

Try

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

или

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

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

Ответ 4

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

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

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

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

Ответ 5

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

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

Когда я тоже занимался этой проблемой, мне показалось, что я все испробовал - в конечном итоге единственное, что помогло, - создать модальное окно (положение: абсолютное) вне контейнера приложения app, а также установить контейнер приложения app на дисплей: ложь; когда клавиатура подходила. В то время как это работало, это было уродливо, я тестировал все, чтобы увидеть, что вызвало это событие, и казалось, что когда "фокусное событие" пузырилось, каждое 3D-трансформирование перепуталось (в мерцании и производительности).

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

Ответ 6

Вам не понравится, если я скажу это, но JavaScript может быть ответом, который вы ищете. Я боюсь, что когда вы принесете клавиатуру, процесс рендеринга HTML теряет приоритет. При постоянном обновлении script, как и в цикле setInterval, у iPad не будет выбора, кроме как сделать так, как планировалось. Явный код не требует хаков.

Ответ 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-преобразований, но поможет сузить проблему.)

Ответ 8

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