iOS8 Safari -webkit-overflow-scrolling: touch; numero

Question

Quindi stiamo costruendo questa applicazione web per un client che ha funzionato perfettamente su iOS7 in Safari. Ma quando abbiamo controllato l'app in iOS8 c'erano alcuni bug enormi.

• Se un utente apre la barra laterale e la chiude, il contenuto che si trova in un <section style="overlay-y: scroll;"></section> scompare (la parte sovrapposta).
• Alcuni pulsanti hanno smesso di funzionare per qualsiasi motivo. (<a href="">Lala</a>)

Quando rimuoviamo -webkit-overflow-scrolling: touch; dal contenitore (il div che contiene tutti i contenuti) tutto funziona perfettamente come una volta ...

Tutte le idee su che cosa potrebbe essere?

Answer 1

Sto avendo lo stesso problema! Finora non riesco a trovare una vera soluzione, ma c'è una soluzione tutt'altro che ideale:

Supponendo #container ha il set -webkit-overflow-scrolling: touch proprietà, questo jQuery vi possono aiutare:

$('#container').css('-webkit-overflow-scrolling','auto'); 

Or per javascript (non testato):

document.getElementById('container').style.webkitOverflowScrolling = 'auto'; 

Ciò disabiliterà lo scorrimento scorrevole della roulette sulla pagina. Quindi non è l'ideale, ma la tua pagina dovrebbe scorrere correttamente ora.

Edit:

Alcuni ulteriori ricerche hanno portato alla nostra scoperta di un modo più hacky per risolvere questo, mantenendo il buon tocco di scorrimento di lavoro. Supponendo che tu abbia -webkit-overflow-scrolling: touch da qualche parte nel css, puoi "attivarlo" all'interno del tuo JS. Non sono sicuro di quello che hai che mostra/nasconde il menu, ma spero che tu possa utilizzare questo.

function toggleMenu(){ 
    $('#container').css('-webkit-overflow-scrolling','auto'); 

    //...Existing code 

    setTimeout(function() { 
     $('#container').css('-webkit-overflow-scrolling','touch'); 
    },500); 
} 

Questo non ha funzionato per me senza il setTimeout. Spero che questo possa aiutare te o qualcun altro.

Answer 2

Ho riscontrato questo problema in iOS8 che tutti i miei pulsanti associati all'evento click non funzionano correttamente. In generale avremo 300 ms di ritardo ma in alcuni punti dovrò premere più di un paio di volte per farlo scattare.

Quindi ho trovato anche questa soluzione che funziona sul mio. Aggiunta di touchend con clic.

button.on('click touchend', function(event) { 
    // this fires twice on touch devices 
}); 

È possibile visualizzare il forum che hanno discusso qui.

JavaScript touchend versus click dilemma

Spero che questo aiuto.

Answer 3

La tua barra laterale è animata con animazioni CSS per caso?

Ho avuto lo stesso errore in un'app web Cordova.Dopo alcuni esperimenti, ho scoperto che il problema è stato causato da genitore <div> (la barra laterale) che veniva animato attraverso animazioni CSS e aveva la proprietà animation-fill-mode: forwards;

rimozione di questa proprietà ha risolto il problema e restaurato l'atteso -webkit-overflow-scrolling: touch comportamento

Answer 4

La mia risposta è:

$('#container').css('-webkit-overflow-scrolling','auto'); 

soluzione precedente non ha funzionato:

document.getElementById('container').style.webkitOverflowScrolling = 'auto';