Медленный просмотр списка прокрутки на iPad при прокрутке в переполнении: auto div

Я разрабатываю приложение Phonegap для основных платформ os и в настоящее время тестирую его на iPad с iOS 5. Я использую jquery mobile. Поэтому для больших экранов я использовал плагин jQuery splitview. http://asyraf9.github.com/jquery-mobile/
Я положил

$scrollArea.css('overflow-y','auto');        
$scrollArea.css('-webkit-overflow-scrolling','touch');

чтобы сделать прокрутку страницы вместо использования iscroll, как использовался плагин. Теперь, что происходит, является то, что страница не загружается/перекрашивается по мере прокрутки пользователя. У меня есть список из 100 элементов, и я прокручиваю их.

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

При наблюдении я вижу, что элементы списка не отображаются в виду до тех пор, пока прокрутка не остановится. (прокрутка импульса)

Аналогичная проблема здесь http://forum.jquery.com/topic/help-with-slow-list-view-scrolling-on-ipad-when-scrolling-in-an-overflow-auto-div

Что я могу сделать для нормальной работы? То же самое отлично работает на вкладках Android. PLS помощи.

EDIT: Если я использую только

 $scrollArea.css('overflow-y','auto');

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

Пожалуйста, не предлагайте использовать iScroll. Уже пробовал это. его намного медленнее, чем то, что я получаю от -webkit-переполнения, и я не могу его использовать.

Ответ 1

Мой подход

Итак, я много пробовал, и я еще больше читал об этой проблеме. Я закончил с решением, которое "ОК" для меня (потому что оно работает), но которое определенно не близко к "совершенному".

При использовании этого CSS:

.container {
    overflow:                   scroll;
    -webkit-overflow-scrolling: touch;
}

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

Итак, что это за трюк? В основном этот CSS:

.container > * {
    -webkit-transform:          translate3d(0,0,0);
}

С этим правилом контент был почти всегда предоставлен сразу без получения этих пустых областей. Только при прокрутке в первый раз очень быстро это немного мерцает.

Но будьте осторожны с правилом -webkit-transform: translate3d(0,0,0);. Используя это правило в значительной степени во многих дочерних элементах, Safari начал: иногда замедлялся, но почти все время рушился. Лучше всего обернуть все элементы контента в один div, отлично работает.

Готово? Не совсем. Существует еще iframe -issue: ( "argh" )

IFrame

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

//using jQuery
var container   = $('#container');
var iframe  = $('#iframe');
container.scroll( function (event) {
    iframe.css( 'marginLeft', 1 );
    setTimeout( function() {
        iframe.css ( 'marginLeft', 0 );
    }, 1 );
});

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

Итак, возможно, это полезно для кого-то.

Дополнительная информация

Вот еще несколько ссылок по этой проблеме:

О том, как событие scroll запускается в iOS:

событие прокрутки javascript для iPhone/iPad?
Сообщение об ошибке для Apple:

https://stackoverflow.com/a/7893031/1456376
iframe пример с той же проблемой:

fooobar.com/questions/69375/...

Ответ 2

Мы использовали плагин ниже в нашем проекте, вы попробовали это?

https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview

В iOS используется аппаратное ускорение для визуализации прокрутки. Он довольно прост в использовании, все, что вам нужно сделать, - назначить дополнительный класс вашему div.

У нас были некоторые проблемы с Android 2 с этим плагином, чтобы преодолеть эти проблемы, мы изменили свойство scrollMethod в jquery.mobile.scrollview.js.

Я надеюсь, что это поможет вам решить вашу проблему прокрутки.