css - personalizar - webkit overflow hidden

Webkit desbordamiento desplazamiento CSS error en iPad

Question

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

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

Tengo dos elementos con el nuevo -webkit-overflow-scrolling: touch; Propiedad y valor aplicados. El área gris de la mano izquierda tiene mucho contenido y se desplazará en vertical u horizontal. La derecha solo se desplazará en el paisaje.

Si comienza en modo horizontal (actualizar en paisaje), puede desplazarse por ambas áreas con el desplazamiento de inercia. Funciona genial. Ahora voltea tu iPad en vertical y solo el área de la mano izquierda se desplazará. Esto es lo que se pretende. Pero cuando vuelves al paisaje, el área de la mano derecha ya no se desplazará, mientras que el área de la mano izquierda aún está bien.

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

¿Alguna idea?

Gracias por adelantado,
Será :)

Answer 1

De hecho, estoy teniendo exactamente el mismo problema. Lo he reducido al hecho de que afecta a los DIV cuyos contenidos ya no requieren desplazamiento cuando se cambia la orientación.

En tu ejemplo. El DIV de la derecha se desplaza en horizontal, no NECESITA desplazarse en vertical, pero luego tiene que desplazarse nuevamente. He probado esto cuando ambos DIV (izquierda y derecha) necesitan desplazarse independientemente de la orientación y no es un problema.

ACTUALIZAR:

De hecho, parece que he arreglado esto!

El problema parece ser un problema de tiempo. Durante el cambio de tamaño, el contenido interno no es lo suficientemente grande como para justificar el desplazamiento en el DIV externo que tiene un desbordamiento. Después de perder un día en esto, finalmente se me ocurrió 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í está mi lógica cada vez que la página cambia de tamaño:

   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

Experimenté el mismo error en iPhone, iPod y iPad. Esto no se limita a este último solamente.

Intenté todo lo que se sugirió para ser una solución, pero finalmente la combinación dulce terminó siendo separar el elemento, agregarlo a su contenedor y asignarle explícitamente su propia altura al hacer esto, así:

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

Answer 3

Llegando tarde con una solución similar, pero 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);
}

[EDITAR] Cuidado , después de experimentar (mucho), descubrí esa display:none declaraciones romperá el webkit-overflow-scrolling: touch feature. Nunca lo use en elementos (o elementos primarios de elementos) que se supone que son compatibles con el desplazamiento táctil.

Answer 4

Pude usar un "arreglo" conocido para forzar un redibujado de 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);
});