Мой подход
Итак, я много пробовал и читал еще больше об этой проблеме.В итоге я нашел решение, которое мне подходит (потому что оно работает), но определенно не близко к «идеальному».
При использовании этого 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: ("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 );
});
С событием прокрутки на сенсорном устройстве связано то, что оно срабатывает только тогда, когдапрокрутка подошла к концу, поэтому эта функция не запускается в любое время, но когда импульс заканчивается.Короткое движение на самом деле не видно.
Итак, может быть, это кому-нибудь пригодится.
Дополнительная информация
Вот еще несколько ссылок по этому вопросу: