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

Question

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

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

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

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

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

Так есть идеи?

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

Answer 1

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

var $el = $('.myElementClass');

function setOverflow(){
    $el.css({webkitOverflowScrolling: 'touch', overflow: 'auto'});
}

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

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

Answer 2

У меня точно такая же проблема.Я сузил его до того факта, что он влияет на 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);

}

Answer 3

Мне удалось использовать известное «исправление», чтобы принудительно перерисовать 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);
});

Answer 4

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

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

$(window).on('orientationchange', function(){
  var el  = $('.troublemaker').detach(),
      elh = el.height();
  setTimeout( el.css({'height':elh+'px'}).appendTo('.container'), 50 );
});