Utilizzo di "-webkit-overflow-scrolling: touch" nasconde il contenuto durante lo scorrimento/trascinamento

Question

poiché il titolo dice che sto avendo il problema con il contenuto nascosto mentre si scorre/trascina il contenuto quando si utilizza la proprietà CSS -webkit-overflow-scrolling: touch.

Per una conoscenza di base, qui è il mio markup

<div class="page"> 
    <div class="section_title">Title</div> 
    <div class="items"> 
     <div class="item">...Text and Image...</div> 
     <div class="item">...Text and Image...</div> 
     <div class="item">...Text and Image...</div> 
    </div> 
    <div class="section_title">Title</div> 
    <div class="items"> 
     <div class="item">...Text and Image...</div> 
     <div class="item">...Text and Image...</div> 
     <div class="item">...Text and Image...</div> 
    </div> 
</div> 

E il CSS:

.page { 
    width: 320px; 
    height: 366px; 
    overflow: scroll; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
} 

Il codice stesso funziona bene, posso scorrere il contenuto, ma tutto ciò che si trova all'interno di un gli oggetti div sono nascosti mentre sto scorrendo/trascinando. Qualcuno ha trovato questo problema e lo ha risolto oppure è solo un comportamento standard di Safari per salvare la memoria e non c'è nulla che possiamo fare al riguardo?

Ogni aiuto è apprezzato :-)

Answer 1

Avete provato a mettere gli elementi in memoria?

caso contrario, provare mettendo .items in memoria utilizzando il css -webkit-transform: translate3d(0,0,0);

Si consiglia di andare più in alto o più in basso di nidificazione a seconda delle prestazioni, vale a dire l'applicazione della traducono in .pagina o .item. Ciò aumenterà la memoria utilizzata che potrebbe causare un arresto anomalo, ma aiuta il browser a ridisegnare tutto.

In ogni caso, spero che questo aiuti!

Answer 2

Questo probabilmente ha a che fare con un errore nel webkit. Se hai una "posizione: relativa" o assoluta, il tuo codice dovrebbe funzionare bene.