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

Question

Я разрабатываю приложение для iPad с помощью HTML5/CSS3. Я не использую фреймворк и просто использую все, что на нем поддерживается. Я создал некоторые анимации css3 для эмуляции типичного iOS, сдвигающегося влево или скольжения вправо при навигации между экранами. Вот пример слайд-левого анимации, который использует аппаратное ускорение CSS3 для iPad: (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/ и статьи, связанные с ними, но не добились успеха.

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

Update 1/13 @ 9 утра

Я добавил этот CSS, и это помогло:

 
.incoming *, 
.outgoing *{ 
-webkit-backface-visibility: hidden; 
-webkit-transform: translate3d(0,0,0); /* This helps with the flicker a lot. */ 
} 

The foreground elements don't seem to flicker anymore, but the backgrounds still do. Still looking for some help or helpful resources on Mobile Safari's memory handling tactics.

Update 1/16 @ 11pm

Increasing the z-index as suggested by anonymous. Didn't seem to make a difference.

Update 1/17 @ 8:30am

I've posted a demo of the problem here .

The transitions between screens work great...until you tap/click inside one of the form fields. After the keyboard slides up and returns, all the transitions flicker. Go to the URL inside the iOS simulator or on an actual iPad to see what I'm talking about.

Answer 1

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

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

Answer 2

You're not going to like me saying this, but JavaScript may be the answer you're looking for. I fear that when you bring the keyboard up, the process of rendering the HTML loses priority. With a continually updating script, like a setInterval цикла, IPad не будет иного выбора, кроме как вынести, как и планировалось. Явный код не требует хаков.

Answer 3

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

Попробуйте

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

или

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

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

Answer 4

Я согласен с Беном, вероятно, вы должны установить трансформирует на самих, а также классах:

/************************************************* 
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 5

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

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

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

в основном установить Z-индекс страницы вы движетесь к -1 и после transistion обратно на 1

Answer 6

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

Answer 7

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

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

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

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

Answer 8

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

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

-webkit-perspective: 0; 

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

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