Desplazamiento con un solo dedo en Safari que no muestra html hasta que finaliza el desplazamiento

En una aplicación web móvil tengo un div que se puede desplazar con el nuevo sofisticado -webkit-overflow-scrolling: touch. El único problema es que el contenido se está procesando solo cuando finaliza el desplazamiento. ¿Hay alguna manera de hacer que Mobile Safari (y tal vez otros navegadores móviles, como el de Android) muestren el html durante el desplazamiento con un solo dedo?Desplazamiento con un solo dedo en Safari que no muestra html hasta que finaliza el desplazamiento

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

Fuente

2011-11-28 FreeCandies

realmente. Esa es la forma en que funciona el iPhone. Si se desplaza, todos los recursos se utilizan para que el desplazamiento sea muy suave, a expensas de no mostrar las partes nuevas. Podría engañar al navegador para que piense que la capa es más grande, haciéndolo más grande, y agregar una capa encima de la parte que no desea mostrar, pero esto no funciona para todos los diseños. Solo lo dejaría. Los usuarios están acostumbrados, ya que las páginas normales tienen el mismo "problema de representación". – Gerben

Gracias, Gavin. Esto me queda bien ¿Hay alguna manera en que pueda marcar su comentario como la respuesta a esta pregunta? – FreeCandies

Ahora puedes. Vea abajo. :-) – Gerben

Realmente no. Esa es la forma en que funciona el iPhone. Si se desplaza, todos los recursos se utilizan para que el desplazamiento sea muy suave, a expensas de no mostrar las partes nuevas. Podría engañar al navegador para que piense que la capa es más grande, haciéndolo más grande, y agregar una capa encima de la parte que no desea mostrar, pero esto no funciona para todos los diseños. Solo lo dejaría. Los usuarios están acostumbrados, ya que las páginas normales tienen el mismo "problema de representación".

Fuente

2011-12-23 14:41:22 Gerben

La posición: absoluta está jugando con la representación. Mobile Safari no representará elementos que no tengan el valor estándar para el posicionamiento, hasta que el desplazamiento se haya detenido.

Si la posición es automática (el valor predeterminado), Mobile Safari representará el elemento a medida que se desplaza.

Fuente

2012-04-25 07:58:33

Esto es correcto. Existen diferentes métodos que manejan la representación del diseño (scroll completo, scroll de azulejos, etc. si no recuerdo mal), y por ej. la propiedad de posición establecida en absoluta reducirá la representación del diseño a un método más lento. El mismo comportamiento se produce en algunos dispositivos móviles, por ejemplo. cuando se usa sombreado de caja o gradientes de CSS. – zvona

Puede solucionar esto utilizando la aceleración de hardware. Trate de añadir el siguiente CSS a elementos dentro .layer-content:

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

Fuente

2012-07-16 14:03:13

Estoy muy seguros de que acabo de resolver esto con:

overflow-y: auto;

añadir que a su elemento de desplazamiento.

(Es de suponer que simplemente overflow: auto; funcionaría también en función de sus necesidades.)

Fuente

2015-12-30 05:45:28

Desplazamiento con un solo dedo en Safari que no muestra html hasta que finaliza el desplazamiento

Respuesta

Cuestiones relacionadas