Проблема с прокруткой в iOS 5 с использованием -webkit-overflow-scrolling

У меня есть HTML-страница с фиксированной высотой div, которая должна быть прокручиваемой (только вертикально). В iOS 5 это может быть достигнуто с помощью:

overflow-y: auto;
-webkit-overflow-scrolling: touch;

div содержит неупорядоченный список из примерно 10 элементов.

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

Мне интересно, столкнулся ли кто-нибудь с этой проблемой. Я не хочу думать, что это ошибка в iOS5, но я не могу понять, что я делаю неправильно, потому что большую часть времени она работает нормально.

Ответ 1

У меня была точно такая же проблема. Проблема оказалась вызвана двумя фреймами нулевого размера, которые мой сайт использовал для отслеживания изменений истории и загрузки скриптов. Удаление этих исправлено. Я подал ошибку с яблоком, ожидая услышать от них.

Проверьте, есть ли у вас какие-либо фреймы на вашей странице, они могут быть причиной.

Ответ 2

Я нашел хакерское решение, но ему нужен javascript...

Я наткнулся на эту проблему при загрузке прокручиваемых узлов через ajax и добавлении их с помощью js.

Я узнал, что сброс свойства -webkit-overflow-scrolling с js сохранено в день

JS CODE:

var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
    myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);

Это действительно отстой, что мы должны вызвать метод setTimeout, но это единственный способ, о котором я мог думать...

РЕДАКТИРОВАТЬ: Остерегайтесь display:none

Переполнение переполнения Webkit с ошибкой CSS на iPad

Ответ 3

Вам нужно поместить эту настройку css в ваш файл css - тот, который вы загружаете, используя переменную конфигурации content_css:

body {
    -webkit-transform: translate3d(0, 0, 0);
}

Другой вариант - установить css непосредственно из кода при инициализации tinymce:

$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));

Ответ 4

У меня была такая же проблема в iOS 5.1.1, и она оказалась из-за псевдоэлемента ::after с position: fixed, который был на элементе, содержащем прокручиваемый список, демонстрирующий поведение "неправильной оси прокрутки", Подробнее здесь.