ios - code - personalizar scroll css
Las imágenes de iOS5 desaparecen cuando se desplaza con webkit-overflow-scrolling: toque (6)
Anteriormente había estado usando el complemento iScroll pero quería eliminarlo para el comportamiento nativo.
La implementación inicial estaba usando
webkit-overflow-scrolling: auto;
Sin embargo, he actualizado esto para ...
webkit-overflow-scrolling: touch
.. para habilitar el movimiento / inercia en el desplazamiento táctil.
El problema con esto es que los elementos de la lista contenidos en la navegación desaparecen por completo al desplazarse, y solo regresan una vez que el impulso se ha detenido.
Un ejemplo de esto se puede ver aquí.
Como dijo Mark Napthine, agregando la siguiente definición de css:
-webkit-transform: translateZ(0);
En efecto, debe obligar a la prestación. El truco consiste en colocarlo en cada elemento no generado dentro de su contenedor de desbordamiento. En mi caso, es una lista desordenada de imágenes contenidas en un div con la definición
-webkit-overflow-scrolling: touch;
Puse la definición de "transformación" arriba en las etiquetas li que encierran las imágenes y resolvió el problema instantáneamente. Espero que esto ayude...
Este error parece aún peor con los 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é informado si me responden. Intenté todo (iFrame desplazable con / sin contenedor div, contenedor con / sin desplazamiento, etc.), simplemente no hay manera: tenemos que esperar a Apple para una corrección de errores.
Este es un error que también he encontrado. 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 lo hace), aunque tuve resultados mezclados con esto.
Otro usuario dijo que lo ha informado en el sitio bugreport.apple.com, pero los errores informados no son públicos allí, por lo que es imposible para el resto de nosotros ver la respuesta oficial, si la hubiera, o hacer un seguimiento del progreso.
He tenido el mismo problema en el pasado, si necesita usar elementos posicionados intente agregar -webkit-transform: translateZ(0); A los elementos o al contenedor. Esta propiedad a menudo obliga al navegador a usar la aceleración de hardware y, con la potencia adicional, sus imágenes probablemente no desaparecerán. Funcionó para mí de todos modos.
Más cosas útiles aquí también: http://www.html5rocks.com/en/tutorials/speed/html5/
Rastreamos esto a elementos que tenían posición: relativa o posición: absoluta. Después de eliminarlos, los elementos se mostrarían durante el desplazamiento.
-webkit-transform: translate3d(0, 0, 0);