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

Ответ 1

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

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

UPDATE:

На самом деле я действительно исправил это!

Проблема, по-видимому, связана с синхронизацией. Во время изменения размера внутренний контент недостаточно велик, чтобы гарантировать прокрутку на внешнем 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);

}

Ответ 2

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

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. Никогда не используйте его на элементах (или родителях элементов), которые должны поддерживать сенсорную прокрутку.

Ответ 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);
});

Ответ 4

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

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

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