Webkit переполнения прокрутки Touch ошибка CSS на iPad

Если вы посетите эту страницу на своем iPad-устройстве в последней версии iOS, вы можете следить за ней.

http://fiddle.jshell.net/will/8VJ58/10/show/light/

У меня есть два элемента с новой –webkit-overflow-scrolling: touch; свойства и стоимость. Серая область левой руки имеет много контента и будет прокручиваться в портретной или альбомной ориентации. Право будет прокручиваться только в ландшафте.

Если вы начинаете в ландшафте (обновлять в ландшафте), вы можете прокручивать обе области с помощью инерционной прокрутки. Прекрасно работает. Теперь переверните iPad на портрет, и только левая область будет прокручиваться. Это так, как предполагалось. Но когда вы переходите к пейзажу, область правой руки больше не будет прокручиваться, тогда как область левой руки все равно.

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

Итак, какие-нибудь идеи?

Заранее спасибо,
Будет 🙂

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

В вашем примере. DIV на правых прокрутках в ландшафте, НЕ НУЖНО прокручивать портрет, но затем нужно прокручивать снова. Я проверил это, когда оба DIV (слева и справа) должны прокручиваться независимо от ориентации, и это не проблема.

ОБНОВИТЬ:

Кажется, я это исправил!

Проблема, по-видимому, связана с синхронизацией. Во время изменения размера внутренний контент недостаточно велик, чтобы гарантировать прокрутку на внешнем DIV, который имеет переполнение. После того, как я потратил день на это, я, наконец, придумал этот взлом:

<div id="header" style="position:fixed; height:100px">Header</div> <div id="content" style="overflow: auto; -webkit-overflow-scrolling: touch"> <div id="contentInner"> content that is not long enough to always scroll during different orientations </div> </div> 

Вот моя логика всякий раз, когда изменяется страница:

  function handleResize() { var iHeight = $(window).height() - $("#header").height(); // Height needs to be set, to allow for scrolling - //this is the fixed container that will scroll $('#content').height(iHeight - 10); // Temporarily blow out the inner content, to FORCE ipad to scroll during resizing // This is a timing issue where the inner content is not big enough during resize post orientation to require the outer DIV to scroll $('#contentInner').height(1000); // Set the heights back to something normal // We have to "pause" long enough for the re-orientation resize to finish window.setTimeout(delayFix, 10); } function delayFix() { var iHeight = $(window).height() - $("#header").height(); // Inner divs force the outer div to always have at least something to scroll. This makes the inner DIV always "rubber-band" and prevents // the page from scrolling all over the place for no reason. // The height of the inner guy needs to be AT LEAST as big as the container and actually a nip bigger to cause the // scrollable area to 'rubber band' properly $('#contentInner').height(iHeight + 20); } 

Поздно с аналогичным, но более простым решением.

 var $el = $('.myElementClass'); function setOverflow(){ $el.css({webkitOverflowScrolling: 'touch', overflow: 'auto'}); } function resizeHandler(){ $el.css({webkitOverflowScrolling: 'auto', overflow: 'hidden'}); setTimeout(setOverflow,10); } 

[EDIT] Осторожно , после экспериментов (много), я узнал, что display:none объявления, несомненно, нарушат функцию webkit-overflow-scrolling: touch . Никогда не используйте его на элементах (или родителях элементов), которые должны поддерживать сенсорную прокрутку.

Я смог использовать известное «исправление», чтобы принудительно перерисовать iOS6, чтобы исправить эту проблему, не используя setTimeout.

 $(window).on('orientationchange', function() { var $elem=$('[selector]'); var orgDisplay=$elem.css('display'); $elem.css('display','none'); $elem.get(0).offsetHeight; $elem.css('display',orgDisplay); }); 

Я испытал ту же ошибку на iPhone, iPod и iPad. Это не ограничивается только последним.

Я попробовал все, что было предложено для решения, но в конечном итоге сладкая комбинация закончилась тем, что она отделяла элемент, добавляя его в свой контейнер и явно назначая ему свою высоту, делая это, например:

 $(window).on('orientationchange', function(){ var el = $('.troublemaker').detach(), elh = el.height(); setTimeout( el.css({'height':elh+'px'}).appendTo('.container'), 50 ); }); 
  • событие touchMove на мобильном сафари - приводит к перетаскиванию всей страницы
  • фиксированная позиция сломана на contentEditable Safari ios webkit
  • Не удалось выполнить команду com.apple.WebKit.WebContent
  • Невозможно создать / включить среду WebKit в проект iOS
  • touchhend событие в ios webkit не стреляет?
  • Youtube iframe встраивается с масштабированием webkit-transform на iOS
  • Вид ввода типа даты в Safari на iOS
  • WebKit Audio искажается на iOS 6 (iPhone 5) впервые после включения питания
  • Обнаружение воспроизведения видео в компоненте WKWebView
  • Переход CSS во время touchmove на устройствах iOS 7 не запускается
  • Исправлена ​​навигация, когда прыгали -webkit-overflow-scrolling: touch;
  • Interesting Posts

    Force iPad Pro для полного разрешения без запуска

    Мерцание карты Google в iOS

    У меня есть NSString: «Имя Фамилия». Как преобразовать его в «Firstname L.»?

    iOS Capture, затем обрезайте и замаскируйте изображение результата

    Получение глобального списка всех приложений ios

    IOS загружает файлы символов для сбоя отчетов о сбоях

    Утечка памяти: CGDataProviderCreateWithCopyOfData

    swift ios 8 изменить название раздела раздела в виде таблицы

    Swift – возврат данных из NSURLSession при отправке запроса POST

    Как загрузить несколько изображений в multipart с помощью Alamofire?

    Перетаскивание соединений из раскадровки в делегат приложения

    Swift SpriteKit PhysicsBody принудительно, как опция, с помощью Xcode

    Настройка файлового сервера для интеграции с приложениями iOS

    Как декодировать серийный номер, информацию о эмитенте и т. Д. Из сертификата, присутствующего в цепочке ключей в iOS?

    UIImageView. Zoom и Center для произвольного прямоугольника. Невозможно определить правильный центр на экране

    Давайте будем гением компьютера.