Las imágenes iOS5 desaparecen al desplazarse con webkit-overflow-scrolling: táctil

Anteriormente había estado usando el plugin de iScroll pero quería dejarlo para el comportamiento nativo.

La implementación inicial estaba usando

webkit-overflow-scrolling: auto; 

sin embargo, actualicé esto para …

 webkit-overflow-scrolling: touch 

.. para habilitar el movimiento / inercia en el desplazamiento táctil.

El problema con esto es que los ítems de la lista contenidos en la navegación desaparecen por completo al desplazarse, y solo regresan una vez que el ímpetu se ha detenido.

Un ejemplo de esto se puede ver aquí

He tenido el mismo problema en el pasado, si necesita usar elementos posicionados intente agregar -webkit-transform: translateZ(0); a los elementos o el contenedor. Esta propiedad a menudo obliga al navegador a utilizar la aceleración de hardware y con la potencia extra es probable que las imágenes no desaparezcan. Funcionó para mí de todos modos.

También hay más cosas útiles aquí: http://www.html5rocks.com/en/tutorials/speed/html5/

Hemos rastreado esto hasta los elementos que tenían posición: relativa o posición: absoluta. Después de eliminarlos, los elementos se mostrarían mientras se desplaza.

Como dijo Mark Napthine, agregando la siguiente definición de css:

 -webkit-transform: translateZ(0); 

debería forzar la renderización. El truco es ponerlo en cada elemento no procesado dentro de su contenedor desbordado. En mi caso, es una lista desordenada de imágenes contenidas en un div con la def

 -webkit-overflow-scrolling: touch; 

Puse la definición de “transformación” arriba en las tags de li envolviendo las imágenes y resolvió el problema al instante. Espero que esto ayude…

Este es un error que he encontrado también: esta pregunta parece estar relacionada con el mismo problema: propiedad CSS3 webkit-overflow-scrolling: toque ERROR

El usuario 1012566 sugirió que tiene que ver con la propiedad de posición de los elementos dentro del rollo (trabajos estáticos, nada más), aunque tuve resultados mixtos con esto.

Otro usuario dijo que lo reportaron en el sitio bugreport.apple.com, pero que los errores reportados no son públicos allí, por lo que es imposible para el rest de nosotros ver la respuesta oficial, si la hay, o seguir el progreso.

Este error parece incluso peor con iFrames. Creé un JSFIDDLE para demostrarlo (abra http://jsfiddle.net/KMayN/9/ con un dispositivo iOS 5.0.1) y envié un informe de error a Apple. Muy curioso: si te desplazas, verás un contenido en blanco (no renderizado) … pero si haces zoom, ¡aparecerá el contenido! Y así sucesivamente … Te mantendré actualizado si me responden. Intenté todo (iFrame desplazable con / sin contenedor div, contenedor con / sin desplazamiento, etc.), simplemente no hay forma: tenemos que esperar a que Apple solucione el error.

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