Scroll de desbordamiento de Webkit toque error de CSS en el iPad

Question

Si visita esta página en su dispositivo iPad en la última versión de iOS puede seguirlo.

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

I tienen dos elementos con el nuevo -webkit-desbordamiento de desplazamiento: el tacto; propiedad y valor aplicado. El área gris de la izquierda tiene mucho contenido y se desplazará en vertical u horizontal. La derecha solo se desplazará en el paisaje.

Si comienza en paisaje (actualización en el paisaje) puede desplazarse por ambas áreas con el desplazamiento de inercia. Funciona genial. Ahora coloca tu iPad en retrato y solo se desplazará el área de la mano izquierda. Esto es como se pretendía. Pero cuando vuelves al paisaje, el área de la mano derecha ya no se desplazará, mientras que el área de la mano izquierda todavía está bien.

Es obvio cómo evitar que esto suceda, pero no siempre tengo el contenido para llenar el área.

¿Alguna idea?

Gracias de antemano,
sea el caso :)

Answer 1

De hecho, estoy teniendo el mismo problema exacto. Lo he reducido al hecho de que afecta a DIVs cuyo contenido ya no requiere desplazamiento cuando se cambia la orientación.

En su ejemplo. El DIV en la derecha se desplaza en el paisaje, NO NECESITA desplazarse en vertical, pero luego necesita desplazarse nuevamente. He probado esto cuando ambos DIV (izquierdo y derecho) necesitan desplazarse independientemente de la orientación y no es un problema.

ACTUALIZACIÓN:

De hecho, me parece que hemos solucionado este!

El problema parece ser un problema de tiempo. Durante el cambio de tamaño, el contenido interno no es lo suficientemente grande como para garantizar el desplazamiento en el DIV externo que tiene desbordamiento. Después de pasar un día en esto, que finalmente ocurrió con este truco:

<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> 

Aquí es mi lógica cada vez que cambia el tamaño de la página:

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 2

Llegar tarde con una similar, pero la solución más simple.

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

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

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

[EDIT] Cuidado con, después de experimentar (mucho), descubrí que display:none declaraciones seguramente ruptura la característica webkit-overflow-scrolling: touch. Nunca lo use en elementos (o elementos principales) que se supone que son compatibles con el desplazamiento táctil.

Answer 3

Experimenté el mismo error en iPhone, iPod y iPad. Esto no está restringido solo a este último.

He intentado todo lo que se sugiere a ser una solución, pero finalmente la combinación dulce terminó siendo desmontar el elemento, añadiendo que a su contenedor y asignar explícitamente su propia altura mientras se hace esto, así:

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

Answer 4

Pude utilizar un "arreglo" conocido para forzar un rediseño iOS6 para corregir este problema sin tener que usar 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); 
});