Изображения iOS5 исчезают при прокрутке с помощью прокрутки через webkit: коснитесь

Question

Ранее я использовал плагин iScroll, но хотел сбросить его для собственного поведения.

В первоначальной реализации использовалось

webkit-overflow-scrolling: auto;

, однако я обновил его до ...

webkit-overflow-scrolling: touch

.., чтобы включить движение / инерцию на сенсорной прокрутке.

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

Примером этого может быть видел здесь

Answer 1

В прошлом у меня была такая же проблема, если вам нужно использовать позиционированные элементы, попробуйте добавить -webkit-transform: translateZ(0); к элементам или контейнеру.Это свойство часто вынуждает браузер использовать аппаратное ускорение, и при дополнительной мощности ваши изображения, скорее всего, не исчезнут.В любом случае это сработало для меня.

Более полезные вещи здесь: http://www.html5rocks.com/en/tutorials/speed/html5/

Answer 2

Мы отследили это до элементов, которые имели положение: относительное или положение: абсолютное. После их удаления элементы будут отображаться при прокрутке.

Answer 3

Как сказал Марк Нафтин, добавив следующее определение CSS:

-webkit-transform: translateZ(0);

действительно должно заставить рендеринг. Хитрость заключается в том, чтобы поместить его на каждый неопределяемый элемент внутри вашего переполненного контейнера. В моем случае это неупорядоченный список изображений, содержащихся в div с def

-webkit-overflow-scrolling: touch;

Я поместил приведенное выше определение "transform" на теги li, обертывающие изображения, и это мгновенно решило проблему. Надеюсь, это поможет ...

Answer 4

Эта ошибка кажется еще хуже с iFrames. Я создал JSFIDDLE для его демонстрации (откройте http://jsfiddle.net/KMayN/9/ на устройстве iOS 5.0.1) и отправил отчет об ошибке в Apple. Очень любопытно: если вы прокрутите, вы увидите пустой (не визуализированный) контент ... но если вы затем увеличите масштаб, контент появится! И так далее... Я буду держать вас в курсе, если они ответят мне. Я перепробовал все (прокручиваемый iFrame с / без контейнера div, контейнер с / без прокрутки и т. Д.), Просто нет пути: нам нужно дождаться исправления Apple.

Answer 5

Это ошибка, с которой я тоже столкнулся - кажется, этот вопрос относится к той же самой проблеме: CSS3 свойство webkit-overflow-scrolling: коснитесь ОШИБКА

Там пользователь user1012566 предположил, что он имеет отношение к свойству position элементов внутри прокрутки (статические работы, больше ничего не делает), хотя я смешал результаты с этим.

Другой пользователь сказал, что он сообщил об этом на сайте bugreport.apple.com, но сообщаемые сообщения об ошибках там не являются публичными, поэтому для остальных из нас невозможно увидеть официальный ответ, если таковой имеется, или отслеживать прогресс.

Answer 6

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