iOS5 + jquery-mobile transición parpadea

Question

Estoy tratando de eliminar un molesto efecto de parpadeo en las transiciones jqmobile cuando se ejecuta en iOS 5. Intenté varios métodos de otras publicaciones como -webkit-backface e hice algún otro trabajo pero no llegué completo solución. Observé que flickr ocurre cuando, antes de la transición, la página se reposiciona debido a que la barra de navegación se desplaza un píxel (tal vez 2) desde la parte superior. El problema comienza en la inicialización o después de la rotación del dispositivo cuando se rerendered página y luego tenemos dos posibles resultados de trabajo,

1. Trabajar sin parpadeo y se espera en cada transición.
2. Caídas en cada transición que aparece descrita parpadear.

problema, por supuesto, es que obtienes 1 o 2 aleatoriamente cuando se procesa una página nueva. Gracias.

Answer 1

Una combinación de los métodos here debe hacer el truco ...

Para otros que tienen este problema, el OP dijo que

Principalmente-posición de los datos, la cara posterior WebKit y otros no proporciona una solución completa y estableció un CSS personalizado desde jqmobile 1.0 incluidos en un enlace github de lo sugerido por usted y por último funciona

Answer 2

intenta agregar datos a la transición como se especifica aquí: Display issues when we change from one jquery mobile page to another in firefox

Aquí está el ejemplo de la respuesta anterior:

<a href="#page1" data-transition="fade">I am good transition</a> 
<a href="#page1">And I am bad</a> 

Answer 3

Fuente: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5124172

en lugar de posición de los datos: Se ha corregido a la cabecera/pie de página - he aplicado la siguiente estilos CSS a la cabecera, contenido y pie de página:

.header { 
    position : fixed; 
    z-index : 10; 
    top  : 0; 
    width : 100% 
} 
.content { 
    padding : 45px 15px 
} 
.footer { 
    position : fixed; 
    z-index : 10; 
    bottom : 0; 
    width : 100% 
} 

Varias personas en el foro en el enlace de arriba han declarado que esto ha ayudado con los flashes cuando la transición entre las páginas con data-position:fixed encabezado/pie de página.

Otra sugerencia de Tod Parker (creador de jQuery Mobile) fue la siguiente:

.ui-mobile-viewport-transitioning .ui-header-fixed, 
.ui-mobile-viewport-transitioning .ui-footer-fixed { visibility: hidden; } 

que oculta el encabezado/pie de página fija, mientras que la transición de una página a otra.

Fuente: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856

Hubo también una operación de confirmación hecha por otro miembro del equipo de jQuery Mobile que debe mostrar en marcha en la próxima versión. Aquí está la publicación: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856 (el código es un poco complejo para publicar aquí)

Muy recientemente el problema se cerró debido a este compromiso: https://github.com/Diveboard/jquery-mobile/commit/ff125b65e682ecd33888a6db1221ac441d258994. Esta solución consistía en configurar el z-index de la página entrante en -10 antes de desplazarse y luego restablecer el z-index después.

No he intentado ninguna de estas soluciones, pero parecen ser prometedoras.

Answer 4

Si tiene data-position="fixed" entonces una solución es utilizar:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

Answer 5

Para mí, tengo el parpadeo y parpadeo cuando se instaló una diapositiva en el panel. El parpadeo curiosamente sucede incluso cuando el panel está oculto, y para mí ocurrió en elementos plegables.

Mi 'solución' fue la de añadir esto a mi archivo css: (como se sugiere a partir http://api.jquerymobile.com/panel/) con jQuery Mobile 1.3.1:

div { 
    -webkit-transform: translate3d(0,0,0); 
} 

que suena loco - pero 'trabajó para mí'. (Sí, todos los divs)

Parece que todavía no se ven efectos secundarios.

He escrito programas en OpenGL, pero no tengo ni idea de qué -webkit-transform: translate3d (0,0,0); haría.

Answer 6

Problemas comunes en Android 4.0+ por lo que descubrí usando Cordova 2.9. y JQM 1.3: - transición de página blanco parpadeo incluso cuando la transición "ninguna" especifica - grifos dobles necesarios para realizar una navegación

probado en SGII, Motorola MC40, TC55, los mismos problemas en todas las plataformas.

estilo personalizado Uso de cabecera, pie de página, el contenido, eliminar el efecto de posición de datos = "fijo"

Uso de inicialización de JQM (tenga en cuenta, coloque la JS antes JQM incluye)

.header { 
    position : fixed !important; 
    z-index : 10 !important; 
    top  : 0 !important; 
    width : 100% !important; 
} 
.content { 
    padding : 55px 15px !important; 
} 
.footer { 
    position : fixed !important; 
    z-index : 10 !important; 
    bottom : 0 !important; 
    width : 100% !important; 
} 

//use this init 

$(document).bind("mobileinit", function() 
{ 
    $.mobile.defaultPageTransition = "fade"; //default, see styles 
    $.mobile.transitionFallbacks='none'; 
    $.mobile.useFastClick = false; //300ms or double tap needed 
});