Scorrimento improvviso del contenuto in un div di posizione fissa su Safari Safari - e inizia a scorrere il contenitore stesso

Question

Ho un contenitore che contiene position:fixed con contenuto scorrevole. Lo sto visualizzando come funzione di chat sui dispositivi mobili, ma su Safari mobile, il contenuto a scorrimento all'interno del contenitore position:fixed smette di scorrere improvvisamente e inizia a scorrere il contenitore stesso.

Apri questo collegamento su Safari mobile per vedere l'effetto: http://jsbin.com/ruyito

modificabile esempio qui: http://jsbin.com/ruyito/edit?html,css,output

La domanda: Perché il mio contenitore inizio div per scorrere la sua posizione improvvisamente e interrompere lo scorrimento del contenuto? (Su Chrome su Android, funziona senza problemi)

Nota: se si verificano problemi nell'attivazione di questo errore, continua a scorrere rapidamente e rapidamente il contenuto verso l'alto e verso il basso per circa 10 secondi, alla fine interromperà improvvisamente lo scorrimento.

Answer 1

Ho aperto il collegamento (http://jsbin.com/ruyito) iPhone 6 - Safari e tutto sembra a posto. Il contenuto scorre come previsto. Ho provato molte volte su e giù per scorrere, ma non è successo nulla.

A che versione succede? Non potrei dire nulla senza esperienza del bug ma penso che possa essere un problema di scroll virtuale.

È possibile disattivare questo aggiungendo questo.

.chat-container-mobile { 
    -moz-transition: none; 
    -webkit-transition: none; 
    -o-transition: color 0 ease-in; 
    transition: none; 
} 

Answer 2

Non so esattamente quale sia l'accordo. Potrebbe essere che il safari si blocchi quando lo si sposta così velocemente perché ancora tecnicamente sposta il contenitore nel modo in cui dovrebbe dalla definizione degli strumenti dell'ispettore, ma non lo ritragga sullo schermo.

Una cosa che potresti provare negli strumenti dell'ispettore e che sembra risolvere il problema è il reverse engineering di quello che hai. Prova questa modifica al tuo codice. nota il posizionamento/altezza/riempimento sul tuo .chat-container-mobile e z-index/bottom/positioning sugli altri due elementi.

<style> 
.chat-container-mobile { 
position: fixed; 
background-color: #EBEBEB; 
padding: 15px; 
display: block; 
margin: 0; 
top: 0px; 
color: #444444; 
overflow: scroll; 
-webkit-overflow-scrolling: touch; 
height: calc(100vh - 50px); 
padding: 75px 15px 125px; 
} 
.chat-mobile-header { 
position: fixed; 
z-index: 10; 
width: 100%; 
background-color: white; 
color: #444444; 
text-transform: uppercase; 
letter-spacing: 0.04em; 
font-size: 15px; 
font-weight: 500; 
text-align: center; 
top: 0; 
margin: 0; 
padding: 17px 0; 
border-bottom: 1px solid rgba(68, 68, 68, 0.2); 
} 
.chat-field-mobile { 
position: fixed; 
width: 100%; 
z-index: 10; 
bottom: 0; 
margin: 0px; 
padding: 12px 12px 10px 10px; 
background-color: #EBEBEB; 
border-top: 1px solid rgba(68, 68, 68, 0.1); 
} 
</style> 

in questo modo gli altri elementi si trovano solo nella parte superiore della finestra di chat invece di cercare di impilare o forzare i pezzi.

Spero che questo aiuti l'accoppiamento!

Answer 3

Mi sono imbattuto più volte in questo problema quando ho provato a utilizzare i div overflow: scroll in Safari iOS.

La mia comprensione è che ha a che fare con lo scorrimento overscrolling/elastico animazioni. Ciò che sembra accadere è:

1. Quando un certo contenitore (vale a dire la finestra, o il vostro div scorrimento) è in esecuzione queste animazioni gli eventi vengono bloccati per che contenitore.
2. Quando un contenitore overflow: scroll raggiunge la parte superiore/inferiore dell'altezza di scorrimento, inizia a scorrere il contenitore principale, come nel caso di Chrome.

Si può notare nel proprio esempio che quando lo scorrimento smette di funzionare, senza toccare lo schermo per un breve periodo di tempo (ad esempio 500 ms?), Quindi provare a scorrere di nuovo funziona.

Quello che penso stia succedendo è che quando si preme la parte inferiore/superiore del contenitore a scorrimento, gli eventi vengono bloccati sul genitore, in questo caso sulla finestra. Mentre continui a interagire in questo stato, i tuoi eventi non arrivano mai al tuo contenitore a scorrimento, e quindi sembra non rispondere.

Ho avuto qualche successo in passato da non propagare gli eventi touch dal mio contenitore scorrimento fino al documento:

$('.chat-container-mobile').on({ 
    'touchstart': _onTouchStart, 
    'touchmove': _onTouchMove, 
    'touchend': _onTouchEnd 
}); 

function _onTouchStart(e) { 

    e.stopPropagation(); 
} 

function _onTouchMove(e) { 

    e.stopPropagation(); 
} 

function _onTouchEnd(e) { 

    e.stopPropagation(); 
} 

Nota: Questo non sarà una correzione in molte situazioni, come spesso è necessario mantenere il comportamento della finestra di default. In questo caso, tuttavia, sembra che ci sia un layout fisso che non richiede il comportamento di scorrimento del documento predefinito. Inoltre, probabilmente continuerai a vedere lo stesso risultato se tenti di scorrere toccando la barra "Chat di gruppo" in alto o la barra in basso "Tipo di messaggio", quindi in seguito prova a scorrere all'interno del contenitore.

Si potrebbe anche provare a utilizzare e.preventDefault su $(document) per questi eventi tocco. Questo impedisce alla finestra di reagire a questi input utente in primo luogo, anche se questo può causare molti altri problemi se è necessario mantenere le impostazioni predefinite del browser.

Provare anche a localizzare questi binding solo in situazioni in cui è un problema. Quindi controlla iOS e Safari prima di collegarti agli eventi.

Tornerò con ulteriori risultati la prossima volta che cercherò di affrontare il problema - che, siamo onesti, è quasi ogni progetto.

Buona fortuna!

Answer 4

solo cercare di aggiungere bottom:0-.chat-container-mobile { bottom:0 }