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

Question

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

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

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

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

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

Answer 1

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

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

Answer 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

Answer 3

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

Answer 4

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

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

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

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