Я ранее использовал плагин iScroll, но хотел отбросить его для собственного поведения.
Первоначальная реализация заключалась в использовании
webkit-overflow-scrolling: auto;
однако я обновил это, чтобы...
webkit-overflow-scrolling: touch
.., чтобы включить движение/инерцию в касании.
Проблема с этим - элементы списка, содержащиеся в навигации, полностью исчезают при прокрутке и возвращаются только после того, как импульс остановился.
Примером этого может служить здесь
У меня была такая же проблема в прошлом, если вам нужно использовать позиционированные элементы, попробуйте добавить -webkit-transform: translateZ(0); к элементам или контейнеру. Это свойство часто заставляет браузер использовать аппаратное ускорение, и с дополнительной мощностью ваши изображения, скорее всего, не исчезнут. В любом случае, это сработало для меня.
Более полезный материал здесь: http://www.html5rocks.com/en/tutorials/speed/html5/
Мы отследили это до элементов, у которых была позиция: относительная или позиция: абсолютная. После того как мы удалим их, элементы будут отображаться при прокрутке.
Как сказал Марк Наптин, добавив следующее определение css:
-webkit-transform: translateZ(0);
должен действительно заставить рендеринг. Трюк состоит в том, чтобы поместить его на каждый незагруженный элемент внутри вашего переполненного контейнера. В моем случае это неупорядоченный список изображений, содержащихся в div с def
-webkit-overflow-scrolling: touch;
Я положил определение "transform" выше на теги li, обертывая изображения, и он решил проблему мгновенно. Надеюсь, это поможет...
Это ошибка, с которой я столкнулся - этот вопрос, похоже, относится к одной и той же проблеме: свойство CSS3 webkit-overflow-прокрутка: нажмите ОШИБКА
Там user1012566 предположил, что он имеет отношение к свойству position элементов внутри прокрутки (статические работы, ничего не делает), хотя у меня были смешанные результаты с этим.
Другой пользователь сказал, что они сообщили об этом на сайте bugreport.apple.com, но сообщения об ошибках там не публикуются, поэтому остальным нам не удастся увидеть официальный ответ, если таковой имеется, или отслеживать прогресс.
Эта ошибка выглядит хуже с iFrames. Я создал JSFIDDLE, чтобы продемонстрировать его (откройте http://jsfiddle.net/KMayN/9/ с устройством iOS 5.0.1), и я отправил отчет об ошибке в Apple. Очень любопытно: если вы прокрутите список, вы увидите пустое (не отображаемое) содержимое... но если вы затем увеличите масштаб, появится содержимое! И так далее... Я буду держать вас в курсе, если они ответят мне. Я пробовал все (прокручиваемый iFrame с/без контейнера div, контейнер с/без прокрутки и т.д.), Просто нет способа: мы должны ждать Apple для исправления.
-webkit-transform: translate3d(0, 0, 0);