Прокрутка iPad Safari приводит к исчезновению и повторному появлению HTML-элементов с задержкой

Question

В настоящее время я занимаюсь разработкой веб-приложения с использованием html5 и jQuery для iPad Safari.Я столкнулся с проблемой, когда большие области прокрутки приводят к тому, что элементы, находящиеся вне экрана, появляются после задержки, когда я прокручиваю их вниз.

Что я имею в виду, если у меня есть ряд изображенийили даже div с градиентом), который находится вне экрана, когда я прокручиваю (или вверх) к нему, ожидаемое поведение - элемент, который появляется на экране при прокрутке.

Тем не менее, я вижу, что элемент не появляется , пока я не уберу палец с экрана и скроллер не завершит все свои анимации.

Это вызывает суперзаметная проблема для меня, заставляющая все это выглядеть изменчивым, хотя это не так.Я предполагаю, что iPad Safari пытается что-то сделать, чтобы сохранить память.Есть ли способ, которым я могу предотвратить эту изменчивость?Кроме того, я был бы также признателен, если бы кто-нибудь смог пролить свет на то, что на самом деле пытается сделать iPad Safari.

Answer 1

Вам нужно обмануть браузер, чтобы использовать аппаратное ускорение более эффективно. Вы можете сделать это с помощью пустой 3d-трансформации:

-webkit-transform: translate3d(0,0,0)

В частности, вам это понадобится для дочерних элементов, которые имеют объявление position:relative; (или просто сделайте все возможное и сделайте это для всех дочерних элементов).

Не гарантированное исправление, но в большинстве случаев довольно успешно.

Наконечник шляпы: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

Answer 2

Это полный ответ на мой вопрос.Первоначально я пометил ответ @Colin Williams как правильный ответ, поскольку он помог мне найти полное решение.Член сообщества, @Slipp D. Thompson, отредактировал мой вопрос после того, как примерно через 2,5 года я его задал, и сказал, что я злоупотребляю форматом вопросов и ответов SO.Он также сказал мне отдельно опубликовать это как ответ.Итак, вот полный ответ, который решил мою проблему:

@ Колин Уильямс, спасибо!Ваш ответ и статья, на которую вы ссылались, побудили меня попробовать что-то с CSS.

Итак, я раньше использовал translate3d.Это дало нежелательные результаты.По сути, это будет откалывать и НЕ РЕНДЕР элементы, которые были за кадром, пока я не взаимодействовал с ними.Так что, в основном в альбомной ориентации, половина моего сайта, который был за кадром, не отображалась.Это веб-приложение для iPad, из-за которого я был в исправлении.

Применение translate3d к относительно позиционированным элементам решило проблему для этих элементов, но другие элементы перестали отображаться, как только за кадром.Элементы, с которыми я не мог взаимодействовать (художественные работы), никогда больше не будут отображаться, если я не перезагружу страницу.

Полное решение:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

Теперь, хотя это может быть и неСамое «эффективное» решение, оно было единственным, которое работает.Mobile Safari не отображает элементы, которые находятся за пределами экрана или иногда отображаются с ошибками при использовании -webkit-overflow-scrolling: touch.Если translate3d не будет применен ко всем другим элементам, которые могут исчезнуть из-за этой прокрутки, эти элементы будут отрублены после прокрутки.

Итак, еще раз спасибо, и надеюсь, что это поможет какой-то другой потерянной душе.Это, безусловно, помогло мне большое время!

Answer 3

Ориентация на все элементы, кроме html: *:not(html) вызвал проблемы на других элементах в моем случае. Он изменил контекст стека, вызывая разрыв некоторого z-индекса.

Нам лучше попытаться нацелиться на нужный элемент и применить -webkit-transform: translate3d(0,0,0) только к нему.

Редактировать: иногда translate3D(0,0,0) не работает, мы можем использовать следующий метод, нацеливаясь на нужный элемент:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

Answer 4

Когда translate3d не работает, попробуйте добавить перспективу. У меня всегда работает

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Answer 5

Статически не работает добавление -webkit-transform: translate3d(0,0,0) к элементу.

Я применяю это свойство динамически.Например, когда страница прокручивается, я устанавливаю -webkit-transform: translate3d(0,0,0) для элемента.Затем, после небольшой задержки, я сбрасываю это свойство, то есть -webkit-transform: none Этот подход, похоже, работает.

Спасибо, @Colin Williams, за то, что указали мне правильное направление.

Answer 6

У меня была такая же проблема с iscroll 4.2.5 на ios7. Весь элемент прокрутки просто исчезнет. Я попытался добавить translate3d(0,0,0), как было предложено здесь, это решило проблему, но отключило эффект «привязки» iscroll. Решение пришло с предоставлением свойств "position:relative; z-index:1000;display:block" css всему контейнеру, который содержит элемент прокрутки, и нет необходимости передавать translate3d дочерним элементам.

Answer 7

У меня была та же проблема с более старой версией Fancybox. Обновление до v3 решит вашу проблему, ИЛИ вы можете просто добавить:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

Answer 8

В моем случае (приложение iOS Phonegap) применение translate3d к относительным дочерним элементам не решило проблему. У моего прокручиваемого элемента не было заданной высоты, поскольку он был абсолютно позиционирован, и я определял верхнюю и нижнюю позиции. Для меня это исправило добавление минимальной высоты (100 пикселей).

Answer 9

Это очень распространенная проблема, с которой сталкиваются разработчики, и в основном это связано с тем, что Safari's свойство не воссоздавать элементы, определенные как position : fixed.

Так что либо измените свойство позиции, либо нужно применить какой-то взлом, как указано в других ответах.

Link1

Link2

Answer 10

В некоторых случаях применяется вращение и / или Z index .

Поворот : Существующего объявления -webkit-transform для поворота элемента может быть недостаточно для решения проблемы внешнего вида (например, -webkit-transform: rotate(-45deg)). В этом случае вы можете использовать -webkit-transform: translateZ(0px) rotateZ(-45deg) как трюк ( помните о повороте Z ).

Z index : Вместе с вращением вы можете определить положительное свойство z-index, например z-index: 42. Вышеописанных шагов, описанных в разделе «Вращение», в моем случае было достаточно для решения проблемы, даже с пустым translateZ(0px). Я подозреваю, что индекс Z в этом случае может иметь , вызвавшее исчезновение и повторное появление в первую очередь. В любом случае свойство z-index: 42 необходимо сохранить - только -webkit-transform: translateZ(42px) недостаточно.