прокрутка 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) на элемент. Затем после небольшой задержки я сбрасываю это свойство, то есть -webkit-transform: none Этот подход, кажется, работает.

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

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

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

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

overflow-y: auto;

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

есть случаи, когда a поворот и/или индекс 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) только не хватает.

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

поэтому либо измените свойство position, либо какой-то Хак должен быть применен, как указано в других ответах.

Link1

Link2

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

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

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