Scorrimento con un dito in Safari non esegue il rendering html fino alla fine dello scorrimento

Question

In un'applicazione web mobile ho un div che può essere scostato con il nuovo fancy -webkit-overflow-scrolling: touch. L'unico problema è che il contenuto viene reso solo quando termina lo scorrimento. C'è un modo per rendere Mobile Safari (e forse altri browser per dispositivi mobili, come quello su Android) che rendono l'html durante lo scroll con un dito?

.layer-content { 
    position: absolute; 
    top: 112px; 
    bottom: 0; 
    width: 100%; 
    background: #e6e6e6; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch;  
} 

Answer 1

Non proprio. Questo è solo il modo in cui funziona l'iPhone. Se si scorre, tutte le risorse vengono utilizzate per rendere lo scorrimento molto scorrevole, a scapito di non mostrare le nuove parti. Potresti forse ingannare il browser pensando che il livello sia più grande, ingrandendolo e aggiungendo un livello in cima alla parte che non vuoi mostrare, ma questo non funziona per tutti i layout. Lo lascerei stare. Gli utenti sono abituati, poiché le pagine normali hanno lo stesso "problema di rendering".

Answer 2

La posizione: assoluto è il caos del rendering. Mobile Safari non esegue il rendering di elementi che non hanno il valore standard per il posizionamento, fino a quando lo scorrimento non si arresta.

Se la posizione è automatica (il valore predefinito), Mobile Safari esegue il rendering dell'elemento mentre si scorre.

Answer 3

È possibile aggirare il problema utilizzando l'accelerazione hardware. Prova ad aggiungere il seguente CSS per gli elementi all'interno .layer-content:

-webkit-transform: translate3d(0,0,0); 

Answer 4

Sono maledettamente sicuro che appena risolto questo con:

overflow-y: auto; 

aggiungere che, per il vostro elemento di scorrimento.

(Presumibilmente solo overflow: auto; avrebbe lavorato troppo a seconda delle esigenze.)

Non