Problema con desplazamiento en iOS 5 utilizando -webkit-overflow-scrolling

Tengo una página HTML con una altura fija div que debe ser desplazable (solo verticalmente). En iOS 5 esto se puede lograr usando:Problema con desplazamiento en iOS 5 utilizando -webkit-overflow-scrolling

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

El div contiene una lista desordenada con cerca de 10 artículos.

El desplazamiento funciona, pero a veces solo se desplaza si deslizo el dedo diagonalmente 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.

Fuente

2011-11-03 SzilardD

¿Podemos obtener un enlace de demostración? – Charlie

¿Encontró una solución o una solución? Me encontré con el mismo problema y no puedo entenderlo ... – JohannesD

Comencé una recompensa así que puedo dársela a [paul] (http://stackoverflow.com/a/8707635/458193). –

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

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

Fuente

2012-01-03 03:36:31

¿Has escuchado algo de Apple? ¿O ha encontrado otra solución alternativa que eliminar los iframes? Me encontré con este problema al tratar de obtener -webkit-overflow-scrolling para que funcione con [tag: vaadin]. – JohannesD

Aliviar esto, viendo un problema similar: http://stackoverflow.com/questions/10718296/ios5-overflow-scrolling-horizontally-is-controlled-by-vertical-touch Voltear entre el retrato y el paisaje parece solucionar el problema. Sin embargo, no tengo idea de la causa (no hay iframes en mi página). – middric

no, voltear no cambia nada, al menos para mí – Thariama

Es necesario poner esta configuración css en su archivo css - el que se carga utilizando la variable de configuración content_css:

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

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

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

Fuente

2012-06-29 06:22:05 Thariama

No funcionó para mí. –

me han encontrado una solución hacky pero necesita Javascript ...

yo nos topamos con ese problema durante la carga de los nodos de desplazamiento a través de ajax y anexándolos con js.

descubrí que restablecer la propiedad -webkit-desbordamiento de desplazamiento con JS salvado el día

JS CÓDIGO:

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

chupa realmente que tenemos que llamar al método setTimeout pero esa es la única manera que podía pensar ...

EDIT: Tenga cuidado con los display:none

Webkit overflow scrolling touch CSS bug on iPad

Fuente

2012-10-18 14:13:26

¡GRACIAS! Es hacky, pero en lo que a mí respecta, este es un error de iOS en primer lugar. –

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

Fuente

2012-11-15 03:35:52 lazd

Problema con desplazamiento en iOS 5 utilizando -webkit-overflow-scrolling

Respuesta

Cuestiones relacionadas