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

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

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

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

8
direction ios scroll webkit

3 ответов

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

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

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

6

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

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

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

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

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

устройство: iOS 5.1.1 на 2012 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: если содержащие элементы имеют фиксированное положение псевдо-элемента, удаление его может исправить вашу проблему прокрутки.

2

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

0