На мобільному Safari, здається, що веб-перехід переходить, коли віртуальна клавіатура спрацьовує (тобто ковзає вгору), викликає мерехтіння, іноді навіть анімацію повністю пропускає.
Здається, це навіть мерехтить / судить, навіть якщо я поставив transition-delay на ньому.
Дивним є те, що анімація гладка на розмиття (клавіатура відступає).
Я можу повторити проблему в JSFiddle тут: (відкрийте її в iOS)
JSFiddle включений нижче:
Ви можете бачити, що фокусування / натискання на вхідний елемент пропустить анімацію більшість часу. Іноді це прекрасно працює.
Хтось знає про вирішення цього питання? Здається, щось із тим, з чим раніше «стикалися, але я не можу знайти будь-яку інформацію про нього.
Відповіді:
2 для відповіді № 1Мені вдалося побачити переходи тут.
Я додав до вашого елемента box.move.
#box.move {
-webkit-transform: translate3d(300px, 0, 0);
-webkit-backface-visibility: hidden;
}
Додатково ... Ви вже використовуєте jQuery, тому я використовував би це замість CSS для анімації та переходів.
Редагувати:
Я зробив кілька додаткових ворушінь з ослабленням вашого переходу, і я зміг видалити будь-які стрибки / мерехтіння переходу, що робився раніше. Ось скрипка.
-webkit-transition: -webkit-transform cubic-bezier(0.32, 0, 0.68, 1) 500ms;
Єдине, що я можу припустити, це причинаце швидкість кадру, з якою браузер може обробити перехід. Таким чином, зменшивши кількість, яку елемент рухає спочатку, ми можемо зняти ефект мерехтіння. Це може бути причиною того, що браузер за замовчуванням для відео - це відкрити відеоплеєр. Я не думаю, що мобільний браузер сафарі був створений для переміщення елементів 300 пікселів за 500 мс, плавно.