ios5 - Problema al desplazarse en iOS 5 utilizando-webkit-overflow-scrolling

mobile

Question

Tengo una página HTML con un div de altura fija que debe ser desplazable (solo verticalmente). En iOS 5 esto se puede lograr usando:

overflow-y: auto;
-webkit-overflow-scrolling: touch;

El div contiene una lista desordenada con alrededor de 10 elementos.

El desplazamiento funciona, pero a veces solo se desplaza si deslizo el dedo en diagonal o incluso horizontalmente y no verticalmente como debería.

Me pregunto si alguien ha encontrado este problema. No quiero pensar que es un error en iOS5, pero no puedo entender lo que estoy haciendo mal porque la mayoría de las veces funciona bien.

Answer 1

Tenía exactamente el mismo problema. El problema resultó ser causado por dos iframes de tamaño cero que mi sitio usaba para rastrear cambios en el historial y cargar scripts. Eliminar estos solucionó el problema. Archivé un error con la manzana, esperando escuchar de ellos.

Verifique si tiene algún iframes en su página, podría ser la causa.

Answer 2

Debe poner esta configuración de CSS en su archivo css, el que carga usando la variable de configuración content_css :

body {
    -webkit-transform: translate3d(0, 0, 0);
}

La otra opción es establecer el css directamente desde el código en la inicialización de tinymce:

$(tinymce.activeEditor.getBody()).css(''-webkit-transform'', translate3d(0, 0, 0));

Answer 3

He encontrado una solución hacky pero necesita javascript ...

Me encontré con ese problema mientras cargaba nodos desplazables a través de ajax y anexándolos con js.

Descubrí que restablecer la propiedad -webkit-overflow-scrolling con js salvó el día

CÓDIGO JS:

var myDiv = $(''.myDiv'');
myDiv.css(''-webkit-overflow-scrolling'',''auto'');
function fn(){
    myDiv.css(''-webkit-overflow-scrolling'',''touch'');
}
setTimeout(fn,500);

Realmente apesta que tengamos que llamar al método setTimeout , pero esa es la única forma en que podría pensar ...

EDITAR: Cuidado con la display:none

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

Answer 4

Tuve el mismo problema en iOS 5.1.1 y resultó ser debido a un ::after pseudo-elemento con position: fixed que estaba en un elemento que contenía la lista desplegable que exhibía el comportamiento de "eje de desplazamiento incorrecto". Detalles aquí .