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

Ранее я использовал плагин 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-scrolling: touch ERROR

Там 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); 
  • Backspace внутри элемента INPUT приводит к тому, что фиксированное положение DIV перемещается в курсор
  • Ошибка теневого распространения в WebKit в iOS 7 на iPad Retina
  • WKWebKit: нет параметров dataDetectorTypes
  • Как заставить «яблоко-мобильный-веб-приложение» не потерять сессию?
  • Это Facebook для iOS WebView User Agent?
  • Прокрутка iOS Safari вверх не работает на определенных страницах. Зачем?
  • WKWebView заставляет мой контроллер просмотра протекать
  • iOS5 -webkit-overflow-прокрутка вызывает остановку работы сенсорных событий
  • iOS HTML Input Tag останавливает прокрутку в прокручиваемом элементе
  • Включение рамки WebKit для iOS8 не позволяет выполнить проверку
  • Не удалось выполнить команду com.apple.WebKit.WebContent
  • Давайте будем гением компьютера.