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

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

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

Однако я вижу, что элемент не отображается, пока я не вытащу палец с экрана, и скроллер не закончит все его анимации.

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

Ответы

Ответ 1

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

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

Итак, я использовал translate3d раньше. Это привело к нежелательным результатам. В принципе, он будет отрубать, а не элементы RENDER, которые были вне экрана, пока я не общался с ними. Итак, в основном, в альбомной ориентации, половина моего сайта, который был вне экрана, не показывался. Это IPad приложение, благодаря которому я был в исправить.

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

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

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

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

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

Ответ 2

Вам нужно обмануть браузер, чтобы использовать аппаратное ускорение более эффективно. Вы можете сделать это с помощью пустого 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/

Ответ 3

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

Нам лучше попытаться -webkit-transform: translate3d(0,0,0) нужный элемент и применить -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;

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

Я довольно чертовски уверен, что я просто решил это:

overflow-y: auto;

(Предположительно, просто overflow: auto; будет работать также в зависимости от ваших потребностей.)

Ответ 8

Существуют случаи применения вращения и/или индекс Z.

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

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

Ответ 9

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

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

Link1

Link2

Ответ 10

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

Ответ 11

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

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

Ответ 12

В то время, когда translate3d может не работать, в этих случаях можно использовать perspective

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

Ответ 13

Я столкнулся с этой проблемой в Framework7 & Кордовский проект. Я перепробовал все решения выше. Они не решили мою проблему.

В моем случае я использовал анимацию 10+ css на той же странице с бесконечным вращением (преобразование). Мне пришлось удалить анимацию. Теперь все в порядке с отсутствием некоторых визуальных функций.

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

Ответ 14

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

// parent
height: 100vh;

Меняем это на:

height: auto;
min-height: 100vh;

Решил проблему на случай, если кто-то еще столкнется с такой же ситуацией.