IOS -webkit-overflow-scrolling se desplaza en el eje incorrecto, o no funciona en absoluto

Question

Estoy compilando una aplicación móvil para IOS, con html5. Estoy usando "-webkit-overflow-scrolling: touch" para obtener el desplazamiento de la inercia nativa, pero está muy lleno de errores. He resuelto los problemas con el contenido que no se renderiza hasta que se detiene el desplazamiento, pero un error persistente es este:

Cuando intento desplazarme hacia arriba y hacia abajo, no ocurre nada, pero cuando intento desplazarme horizontalmente, el contenido se desplaza verticalmente (90 grados fuera del eje). Si navego por mi aplicación y vuelvo a la página, a veces se solucionará. Además, a veces no se desplaza en absoluto, a pesar de estar lleno de contenido.

Según lo que he buscado en Google, parece que Apple es consciente de este error y no tiene intención de solucionarlo en el corto plazo. ¿Alguien ha encontrado una solución para hacer que "webkit-overflow-scrolling "funcione correctamente?

Answer 1

También he tenido problemas con este error durante meses. La mejor caracterización que he encontrado es:

https://bugs.webkit.org/show_bug.cgi?id=87391

que dice que ocurre cuando la página tiene un marco flotante y el contenido se ajusta desde Javascript. Mi solución actual en The Graphics Codex version 1.6 es usar iScroll4 para desplazar explícitamente la página en lugar de usar el desplazamiento táctil. Como Javascript tiene un único subproceso, esto puede ser lento si también está realizando animaciones o cargando contenido de fondo.

Answer 2

Me encontré con el mismo problema: un nodo que usa -webkit-overflow-scrolling: scroll que se desplaza hacia arriba/abajo intermitentemente solo con un gesto de desplazamiento hacia la izquierda/derecha.

Esto es lo que he encontrado para ser posibles causas:

• iframe presentes en la página en cualquier lugar, visibles o de otro modo (source)
• visibility: hidden aplicado a cualquier padre del nodo desplazable (source)

Sin embargo, ninguna de estas situaciones estaba presente en mi aplicación web. Tenía un <ul> desplazable dentro de un cuadro de diálogo modal de CSS puro que escribí que utilizaba un truco ingenioso para agregar una base transparente - un pseudo-elemento ::after con position: fixed.

Cuando eliminé el position: fixed del pseudo-elemento, ¡el problema desapareció! Por supuesto, esto hizo que mi ingenioso truco fuera inútil, pero fue interesante aprender que este error podría ser desencadenado por esta situación.

Dispositivo: iOS 5.1.1 en 2012 iPad 3 (retina)

código erróneo:

/* Underlay */ 
.dialog::after { 
    z-index: -1; 
    position: fixed; /* <--- This was the problem! */ 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    background-color: rgba(0,0,0,0.4); 

    content: ""; 
} 

tl; dr: si los elementos que contienen tienen un pseudo- posición fija elemento, quitarlo podría solucionar su problema de desplazamiento.

Answer 3

Sé que el problema es viejo, pero tuve que hacer que mi sitio web funcione en iOS 5. Lamentablemente no pude eliminar ni reemplazar el iframe. Me di cuenta de que la presencia de iframe causaba el problema solo si se procesaba antes que el elemento que se desplazaba sin problemas.Agregar iframe al documento más tarde (después del elemento con -webkit-overflow-scrolling: touch) solucionó el problema :)