Scintillement lors de la navigation entre les pages
Mon application mobile phonegap/jquery scintille la plupart du temps lorsque je navigue entre les pages. Est-ce normal ou existe-t-il une solution?
.ui-page {
-webkit-backface-visibility: hidden;
}
Cela a fonctionné pour moi sur phonegap/jquery mobile/Android phone.
Il y a des nouvelles (2012-01-10) sur le scintillement sur Android, voir http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1 -et au-delà /
Quote: exclut les plates-formes peu performantes comme Android 2.x des transitions plus complexes de diapositive, pop et flip afin que celles-ci reviennent au fondu par défaut pour toutes les transitions pour assurer une expérience fluide.
La solution CSS de ce fil n'a pas fonctionné pour moi (Android 2.x).
J'ai désactivé la transistion avec data-transition="none" dans tous les liens et tout allait bien. Cela devrait également fonctionner lorsqu'il est défini au niveau de la page, mais cela n'a pas fonctionné pour moi (jQuery Mobile 1.0). Voici le code:
// turn off animated transitions for Android
if (navigator.userAgent.indexOf("Android") != -1)
{
$("a").attr("data-transition", "none");
}
Une autre (meilleure) façon serait de définir les transitions par défaut pour jQuery Mobile:
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.indexOf("Android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
});
iPhone effectue les transitions accélérées par le matériel, tandis que les autres plates-formes le font par logiciel. Cela explique pourquoi seul l'iPhone effectue des transitions fluides.
J'ai essayé les autres suggestions mais aucune n'a fonctionné pour moi. J'ai fini par le corriger en modifiant la balise META de la fenêtre d'affichage comme suit:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Merci à http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in
Je me suis débarrassé du scintillement sur iOS! Avec en-tête et pied de page statiques.
J'ai mon CSS comme ci-dessous et pas de data-position = "fixed" sur l'en-tête et le pied de page.
.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"],
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active {
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.ui-header {
position:fixed;
z-index:10;
top:0;
width:100%;
padding: 13px 0;
height: 15px;
}
.ui-content {
padding-top: 57px;
padding-bottom: 54px;
overflow: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.ui-footer {
position:fixed;
z-index:10;
bottom:0;
width:100%;
}
Votre application est-elle pour iPhone ou Android?
J'ai vu cela publié à quelques endroits comme un correctif CSS possible pour le scintillement:
#YourApp {
-webkit-backface-visibility: hidden;
overflow: hidden;
}
FIY: J'ai utilisé le correctif CSS la semaine dernière et en passant, j'ai rencontré un autre problème.
Mon application a une page de contact - assez simple en suivant la description fournie ici ( http://jquerymobile.com/demos/1.0a4.1/docs/forms/#forms-text.html ) .
Cependant, dès que vous concentrez un champ de saisie de texte, la page "saute" (lire le défilement) de haut en bas. Parfois, il saute également lors de la saisie de texte. C'est un peu difficile à décrire car le comportement est assez aléatoire mais il y a une discussion à ce sujet. L'idée de désactiver le correctif scintillant vient également de là. https://github.com/jquery/jquery-mobile/issues/2683#commits-ref-d195354
Encore du mal à trouver une solution "correcte" mais au cas où vous n’auriez pas d’entrée clavier, je suppose que cela fonctionnera bien!
Vérifiez ce lien, j'ai eu le même problème, donc je l'ai documenté.
Contenu du lien:
Je développe un phoneGap Android qui utilise JQM. Mon projet contient un en-tête externe fixe et un panneau externe.
En naviguant d'une page à une autre, je vois un clignotement blanc (Page entière) pendant un bref instant, ce qui est étrange. J'ai cherché en ligne mais maintenant des informations correctes et beaucoup de changements de code sur le fichier JQM Core. Après une longue recherche, je l'ai compris et je veux que tout le monde le sache.
Correction: changer
<meta name = "viewport" content="width=device-width, initial-scale=1" />
À
<meta name = "viewport" content="width=device-width, user-scalable = no" />
J'ai eu le même problème, mais pire encore, lors de l'encapsulation d'une application mobile Jquery dans Phonegap. Non seulement les transitions de page vacillaient, mais l'interface utilisateur était complètement rompue. J'ai essayé la plupart des solutions suggérées ici, mais rien n'a fonctionné. Ensuite, j'ai trouvé cette solution de Piotr Walczyszyn, et tout a fonctionné comme un rêve! Fortement recommandé pour toute personne utilisant Jquery mobile et Phonegap ensemble.
Dans le de votre document, placez ce code:
<script src="disableTransition.js"></script>
Pour désactiver les transitions scintillantes, à l'intérieur du fichier disableTransition.js, placez ce code
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
defaultPageTransition: 'none'
});
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
});
Résolu pour moi sur Android.
Il s'agit d'un problème connu que l'équipe qualifie de "clignotant". Ils ont déclaré publiquement qu'ils s'attaqueraient à ce problème bientôt et ont déjà affecté quelqu'un à cela. Voici un récent article de blog qui le mentionne:
http://jquerymobile.com/blog/2011/05/06/jquery-mobile-team-update-week-of-may-2/
J'ai eu le même problème et il était causé par des identifiants en double sur différentes pages de mon HTML.
Même si les identifiants en double se trouvaient dans différentes pages html, JQuery Mobile compile tous vos fichiers HTML dans un seul document HTML, afin qu'il puisse effectuer les transitions de page.
Cela entraînait un code HTML non valide et provoquait un clignotement similaire à ce que vous décrivez.
Une fois que j'ai corrigé le problème des identifiants en double, tout fonctionnait à merveille.
MISE À JOUR: Stack Overflow Répondez ici en expliquant plus sur le problème des identifiants en double dans Jquery Mobile https://stackoverflow.com/a/8608474/271125