IOS -webkit-overflow-scrolling scorre sull'asse sbagliato, o per niente

Question

Sto costruendo un'app mobile per IOS, con html5. Sto usando "-webkit-overflow-scrolling: touch" per ottenere lo scrolling inerziale nativo, ma è molto buggato. Ho risolto i problemi con il contenuto non rendering fino a quando lo scorrimento non si interrompe, ma un errore persistente è questo:

Quando provo a scorrere verso l'alto e verso il basso, non succede nulla, ma quando provo a scorrere orizzontalmente, il contenuto scorre verticalmente (90 gradi fuori asse). Se navigo nella mia app e torno alla pagina, a volte verrà risolto. Inoltre, a volte non scorre affatto, nonostante sia pieno di contenuti.

Da quello che ho su Google, il consenso sembra essere che Apple è a conoscenza di questo bug, e non ha alcuna intenzione di risolverlo in tempi brevi. Qualcuno ha trovato una soluzione per ottenere -webkit-overflow-scrolling per funzionare correttamente?

Answer 1

Ho anche faticato con questo bug per mesi. La migliore caratterizzazione che ho trovato è:

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

che dice che accade quando la pagina ha un iFrame e il contenuto sono impostati da JavaScript. La mia soluzione attuale in The Graphics Codex version 1.6 consiste nell'utilizzare iScroll4 per scorrere la pagina in modo esplicito anziché utilizzare lo scorrimento a sfioramento. Poiché Javascript è a thread singolo, può essere lento se si eseguono anche animazioni o contenuti di caricamento in background.

Answer 2

Ho riscontrato lo stesso problema: un nodo che utilizzava -webkit-overflow-scrolling: scroll che scorreva alternativamente su/giù solo con un gesto di scorrimento sinistra/destra.

Ecco cosa ho trovato per essere le possibili cause:

• iframe presenti sulla pagina ovunque, visibili o in altro modo (source)
• visibility: hidden applicato a qualsiasi genitore del nodo scorrevole (source)

Tuttavia, nessuna di queste situazioni era presente nella mia app Web. Avevo uno scrollerble <ul> all'interno di una pura finestra di dialogo modale CSS che ho scritto che utilizzava un trucco intelligente per aggiungere un underlay trasparente - uno pseudo-elemento ::after con position: fixed.

Quando ho tolto il position: fixed dalla pseudo-elemento, il problema è andato via! Naturalmente, questo ha reso inutile il mio trucco intelligente, ma è stato interessante apprendere che questo bug potrebbe essere innescato da questa situazione.

dispositivo: IOS 5.1.1 sopra 2012 iPad 3 (retina)

codice Offending:

/* 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: se elementi di contenimento hanno una posizione fissa pseudo elemento, rimuovendolo potrebbe risolvere il tuo problema di scorrimento.

Answer 3

So che il problema è un po 'vecchio, ma ho dovuto far funzionare il mio sito Web su iOS 5. Purtroppo non ho potuto rimuovere né sostituire l'iframe. Ho notato che la presenza di iframe ha causato il problema solo se è stato eseguito il rendering prima dell'elemento che doveva scorrere senza problemi.Aggiunta iframe al documento in un secondo momento (dopo l'elemento con -webkit-overflow-scrolling: touch) risolto il problema :)