iPad 2 Safari muestra imágenes y texto html pixelado

Question

Estamos desarrollando una aplicación HTML5 + CSS3 para iPad y iPhone. La aplicación funciona bien en el iPad & todos los iPhones, sin embargo, el iPad 2 muestra los objetos html dom pixellados en el inicio, y permanece así, a veces siempre, a veces durante unos momentos.

La aplicación está diseñada para tocar y gestos. Usamos translate3D para la aceleración de hardware en objetos de desplazamiento. También usamos jQuery (v1.7), pero el scroller que diseñamos es javascript puro, sin frameworks allí. jQuery se usa principalmente para buscar/agregar/eliminar objetos dom y ajax. Excepto jQuery, todo lo demás está escrito internamente, incluidos los complementos jQuery que estamos utilizando.

Como dije, las animaciones se logran mediante translate3D. Para los efectos deslizantes estamos cambiando los valores del eje xey de la transformación -webkit, y cuando se recibe el evento touchend, se logra una animación de momento con javascript, -webkit-transition y translate3D. Mientras se escribe la aplicación, la documentación de iOS Safari de Apple se usa mucho como una guía.

Aunque la aplicación funciona bien en iPad, iPod Touch (2da generación), iPhone 3gs y iPhone 4, cuando se trata de probar en el iPad 2 comenzamos a ver esta pantalla pixelada. La parte más extraña es que el contenido acelerado en 3D es la única parte que se pixela. He adjuntado dos capturas de pantalla, una desde el iPad y otra desde el iPad2. Puedes ver lo que quise decir (se toman en diferentes momentos del mismo día, por lo que el contenido es diferente, lo siento).

El contenido principal (los cuadros con imágenes) puede deslizarse hacia arriba y hacia abajo con eventos táctiles. En iPad2, solo esta parte está pixelada. Mientras se desliza, la pixellación se mantiene la mayoría de las veces, pero en algunas pruebas se restablece después de unos segundos.

Además, el contenido HTML tiene esta línea en:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

Estamos empezando la aceleración de hardware a través de CSS, y los principales objetos de deslizamiento tiene esta propiedad:

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

Para el parpadeo de pruebas , las imágenes no están dentro de ningún objeto dom que tenga un color de fondo, y tiene esta propiedad:

-webkit-backface-visibility: hidden; 

Para más parpadeo de pruebas en algunos casos, se utiliza esta propiedad (pero el contenido pixelado en la captura de pantalla no tiene éste asignado):

-webkit-perspective: 0; 

La aplicación no tiene 'apple-touch-startup-imagen "por el momento, así que nuestro primer pensamiento fue que la captura de inicio que hace IOS de alguna manera es un desastre". Pero resulta que ese no es el problema, ya que una vez que el contenido se descarga a través de wi-fi, la pixellación se mantiene igual.

Si alguna vez alguien se encontró con este o un problema similar y fue capaz de resolverlo, responda ya que no tenemos otras ideas.

Me trataron de dar tanta información como pueda, y aquí están las capturas de pantalla que he prometido es deuda:

iPad:

iPad 2:

Answer 1

Intente eliminar la transformación y vuelva a aplicarla inmediatamente a través de un tiempo de espera:

$("#sliding").css("-webkit-transform: none"); 
setTimeout(
    $("#sliding").css("-webkit-transform", "translate3d(0,0,0)") 
, 0);