HTML5 swipe.js transiciones css3; representación fuera de la pantalla y el almacenamiento en caché de los elementos de la página

Question

Estoy construyendo una revista HTML5 para tabletas y computadoras de escritorio con el uso de swipe.js (http://swipejs.com).

Todo parece funcionar bien, en una página HTML he establecido al lado de cada elemento de la lista de pantalla completa. Toda la revista está compilada en un archivo html estático. Puedo deslizarme por las páginas deslizando las tabletas y usando los botones para la versión de escritorio (considere el ejemplo en la página de inicio de swipe.js, pero luego con las diapositivas en pantalla completa).

Las páginas se colocan una al lado de la otra y tienen las dimensiones de la pantalla.

[ |0||1||2| .. |i-1||i||i+1| .. |n| ] 

Los swipe.js transiciones se hacen con ayuda de css3, usando la función css translate3d(). En este caso, se utiliza la representación de hardware.

En el escritorio (Chrome, Safari, FF), iPad1 y (incluso mejor en) iPad2, esto tiene el efecto deseado que estaba buscando; transiciones suaves ¡Perfecto! Sin embargo, en el iPad3, las páginas parecen mostrarse "lentas" cuando se ingresan (por transición) por primera vez. Incluso sin configurar imágenes de fondo (solo el color), la "representación" de la página en transición se considera un poco "lenta"; la página está formada por bloques "parpadeantes".

Asunción: Mi suposición es (después de leer en el tema), que esto se debe a que el navegador sólo hace que los elementos que están en la pantalla, y almacenar en caché las páginas Birlado sólo por un tiempo, la limpieza de la caché luego para controlar la administración de la memoria.

Mi pregunta: ¿Hay una manera de controlar la representación fuera de la pantalla y el almacenamiento en caché, de modo que pueda forzar la (pre) hacer que los elementos de página i-1, i + 1 (y vaciar la caché para todos los demás elementos de la página) , para acelerar mi renderizado de transición?

Nota: En varios temas sobre StackOverflow, se menciona el "parpadeo" de las transiciones css3. Implementé los trucos de CSS sugeridos pero no resolveré mi caso.

-webkit-backface-visibility: hidden; 
-webkit-transform:translate3d(0,0,0); 

Answer 1

Al final la solución fue un corte de Swipejs en la que he añadido un método 'hideOthers()', ajuste de la visibilidad estilo de 'oculto', que descarga las páginas de la memoria del hardware:

hideOthers: function(index) { 
    var i = 0; 
    var el; 

    for(i in this.slides) { 
     el = this.slides[i]; 
     if (el.tagName == 'LI') { 
      // Show pages i-1, i and i+1 
      if (parseInt(i) == index 
      || (parseInt(i) + 1) == index 
      || (parseInt(i) - 1) == index 
     ) { 
       el.style.visibility = 'visible'; 
      } 
      else { 
       el.style.visibility = 'hidden'; 
      } 
     } 
    } 
} 

..y se añade el gatillo abajo como última línea en el método 'de diapositivas()'

// unload list elements from memory 
var self = this; 
setTimeout(function() { self.hideOthers(index); }, 100); 

Sólo se necesita la translate3d para alternar la aceleración de hardware en (como se menciona en la pregunta anterior):

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

Puede encontrar el resultado (incluido iScroll para desplazamiento vertical) here.

Answer 2

en lo que respecta a los apoyos de la cara posterior/translate3d webkit utilizados para activar la aceleración de hardware, He leído que en iOS 6+ estos no funcionan exactamente lo mismo que en las versiones anteriores, y (lo más importante) que la aceleración de hardware debe aplicarse no solo en el elemento que se está animando, sino también en cualquier elemento que se superponga/superponga.

de referencia (no mucho): http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

Para ser justos esto es bastante anecdótico, me fui incapaz de fijar mi propio problema de parpadeo - debido a los plazos de entrega ajustados - pero esto podría ser un punto en la dirección correcta.