Usando '-webkit-overflow-scrolling: toque' oculta el contenido mientras se desplaza/arrastra

Question

como el título dice que tengo el problema de que el contenido se oculte mientras se desplaza/arrastra el contenido al usar la propiedad CSS -webkit-overflow-scrolling: touch.

Para una comprensión básica, aquí es mi marcado

<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> 

Y el CSS:

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

El código en sí funciona bien, puedo desplazarse por el contenido, sino todo lo que está dentro de un elementos div get está oculto mientras estoy desplazándome/arrastrando. ¿Alguien se encontró con este problema y lo resolvió o es solo el comportamiento estándar de Mobile Safari para guardar la memoria y no hay nada que podamos hacer al respecto?

Cualquier ayuda es apreciada :-)

Answer 1

¿Ha intentado poner los elementos en la memoria?

Si no, intente poner .items en la memoria usando el css -webkit-transform: translate3d(0,0,0);

Es posible que desee ir más alto o más bajo en la anidación en función del rendimiento, es decir, la aplicación de la traducen a .página o .item. Esto aumentará la memoria utilizada, que se puede poner crashy pero ayuda al navegador a volver a dibujar todo.

De todos modos, espero que ayude!

Answer 2

Esto probablemente tiene que ver con un error en el kit web. Si tiene una "posición: relativa" o absoluta, su código debería funcionar bien.