Прокрутка прокрутки IOS -webkit-overflow на неправильной оси или вообще не

Я создаю мобильное приложение для IOS, с html5. Я использую «-webkit-overflow-scrolling: touch», чтобы получить собственную прокрутку инерции, но это очень плохо. Я решил проблемы с контентом, но не до тех пор, пока прокрутка не остановится, но одна постоянная ошибка:

Когда я пытаюсь прокручивать вверх и вниз, ничего не происходит, но когда я пытаюсь прокручивать по горизонтали, содержимое прокручивается вертикально (90 градусов от оси). Если я перемещусь вокруг своего приложения и вернусь на страницу, он иногда будет исправлен. Кроме того, иногда он не будет прокручиваться вообще, несмотря на то, что он наполнен контентом.

Из того, что я искал в Google, консенсус, похоже, заключается в том, что Apple знает об этой ошибке и не собирается фиксировать ее в ближайшее время. Кто-нибудь нашел решение для правильной работы -webkit-overflow-scrolling?

3 Solutions collect form web for “Прокрутка прокрутки IOS -webkit-overflow на неправильной оси или вообще не”

Я тоже много месяцев боролся с этой ошибкой. Лучшая характеристика, которую я нашел:

https://bugs.webkit.org/show_bug.cgi?id=87391

в котором говорится, что это происходит, когда страница имеет iFrame, а содержимое задано из Javascript. Моим текущим обходным решением в Graphics Codex версии 1.6 является использование iScroll4 для явной прокрутки страницы, а не с помощью сенсорной прокрутки. Поскольку Javascript является однопоточным, это может быть медленным, если вы также выполняете анимацию или загружаете фоновый контент.

Я столкнулся с той же проблемой: узел с использованием -webkit-overflow-scrolling: scroll которая будет периодически перемещаться вверх / вниз только с помощью жестов прокрутки влево / вправо.

Вот что я нашел возможными причинами:

  • iframe присутствует на странице где угодно, видимо или иначе ( источник )
  • visibility: hidden применяемый к любому родителю прокручиваемого узла ( источника )

Однако ни одна из этих ситуаций не присутствовала в моем веб-приложении. У меня было прокручиваемое <ul> внутри чистого текстового мода CSS, которое я написал, которое использовало умный трюк, чтобы добавить прозрачную подложку – an ::after псевдоэлемента с position: fixed .

Когда я удалил position: fixed из псевдоэлемента, проблема исчезла! Конечно, это сделало мой хитроумный трюк бесполезным, но было интересно узнать, что эта ошибка может быть вызвана этой ситуацией.

Устройство: iOS 5.1.1 на iPad iPad 3 (сетчатка)

Нарушение кода:

 /* Underlay */ .dialog::after { z-index: -1; position: fixed; /* <--- This was the problem! */ top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); content: ""; } 

tl; dr: если содержащие элементы имеют псевдоэлемент фиксированной позиции, удаление его может устранить вашу проблему прокрутки.

Я знаю, что проблема старая, но мне пришлось сделать свой сайт на iOS 5. К сожалению, я не смог удалить и заменить iframe. Я заметил, что наличие iframe вызвало проблему только в том случае, если она была визуализирована перед элементом, который должен прокручиваться плавно. Добавление iframe в документ позже (после того, как элемент с -webkit-overflow-scrolling: touch) устранил проблему 🙂

  • Как запретить WKWebView неоднократно запрашивать разрешение на доступ к местоположению?
  • Не удалось воспроизвести WebKitLegacy - crash
  • Проведите анимацию в CSS3
  • WKWebView заставляет мой контроллер просмотра протекать
  • Рекомендуемая альтернатива webkit для серверных событий на iOS
  • Нажатие WKWebView на UINavigationController вызывает ui отставание
  • Предотвращение наложения серым цветом на сенсорный экран в мобильном браузере Safari / Webview
  • HTML-разбивка на страницы
  • Это Facebook для iOS WebView User Agent?
  • iOS 8 UIWebview Delegate: WebKit отменил неперехваченное исключение в webView: didFinishLoadForFrame:
  • Как узнать, воспроизводит ли WKWebView аудио?
  • Interesting Posts
    PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.