Изображения 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); 
  • Получение всех файлов cookie из WKWebView
  • Как очистить историю в WKWebView?
  • Прокрутка прокрутки IOS -webkit-overflow на неправильной оси или вообще не
  • WebKit бросает исключение на iOS 8 для вызова setBeingRemoved:
  • iOS Safari RTL Offset с использованием -webkit-overflow-прокрутки: touch и -webkit-transform: translate3d (0,0,0)
  • iOS 9 `-webkit-overflow-scrolling: touch` и` overflow: scroll` перерывы прокрутки
  • Webkit переполнения прокрутки Touch ошибка CSS на iPad
  • Не удалось воспроизвести WebKitLegacy - crash
  • Прокрутка iOS Safari вверх не работает на определенных страницах. Зачем?
  • Анимация Webkit оставляет на экране нежелательные пиксели
  • Не удалось выполнить команду com.apple.WebKit.WebContent
  • Давайте будем гением компьютера.