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

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

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

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

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

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

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

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

Когда 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

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

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

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

Link1

Link2

Существуют случаи применения вращения и/или индекс 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) недостаточно.

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

overflow-y: auto;

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