Momento di scorrimento mobile Safari non funzionante

Question

Al momento ho un problema con un sito reattivo.

Tutte le pagine tranne una non ottengono lo slancio di scorrimento che si otterrebbe normalmente utilizzando Internet sul telefono. Non sono sicuro che si tratti di safari su dispositivi mobili o di altri browser per dispositivi mobili, ho appena iniziato il lavoro reattivo su questo sito.

Ma qualcuno sa perché alcune pagine potrebbero non avere lo slancio? Alcune pagine sono piuttosto pesanti con immagini e un po 'di jQuery, ma non penserei che ci sia abbastanza da causare problemi di rendering.

Qualche idea?

Il collegamento al sito dev è: apt.codeplayground.co.uk.

[EDIT]

Sembra che ci sia un problema con il nostro .wrapper div, in quanto questo non è stato incluso nella pagina su che stava lavorando, ora abbiamo incluso che il rotolo non funziona correttamente.

Answer 1

Ho appena avuto lo stesso problema. Ho trovato this link, che ha risolto il problema.

Aggiungi questa riga di css all'elemento che scorre: -webkit-overflow-scrolling: touch;

#element_that_scrolls 
{ 
    overflow:auto; 
    -webkit-overflow-scrolling: touch; 
} 

Answer 2

Solo il corpo ottiene lo scorrimento nativo. Tutti gli elementi che hanno lo scorrimento eccessivo sono molto lenti. lo scroll scrolling può risolvere il problema, ma è meglio lasciare che il corpo scorra se puoi. È molto più veloce e usa molto meglio il compositing della texture GPU.

Toccare scorrere con creare un'istantanea dell'elemento scorrevole quando si avvia lo scorrimento. Aggiunge quell'immagine a una texture GPU, quindi quando smetti di scorrere distrugge la texture della GPU. Lasciare scorrere il corpo usa meglio la memoria texture e di solito è la soluzione migliore.

Answer 3

Insieme a ciò che @Mark ha detto, per quanto riguarda la proprietà css, è necessario ricordare che questa proprietà doveva essere fornita al genitore del contenuto a scorrimento.

Il momentum può funzionare sul contenitore del contenuto da scorrere. Non direttamente sul contenuto, altrimenti non riesce a capire come e per cosa dare lo slancio.

.element_that_scrolls 
{ 
    overflow:auto; 
    -webkit-overflow-scrolling: touch; 
} 

//Wrong 
<ul class="element_that_scrolls"> 
    ... 
</ul> 

//Correct 
<div class="element_that_scrolls"> 
    <ul> 
     ... 
    </ul> 
</div>