Scintillement lors de la navigation entre les pages

Question

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 à cela?

Answer 1

 .ui-page {
    -webkit-backface-visibility: hidden;
}
 

Cela a fonctionné pour moi sur phonegap / jquery mobile / Android phone.

Answer 2

Il y a des news (2012-01-10) sur le scintillement sur Android, voir http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/

Citation: exclure les piètres performances des plates-formes comme Android 2.x à partir de la plus complexe de la diapositive, la pop et le et retournez les transitions de sorte que ces reviendra au transfert par défaut pour toutes les transitions pour assurer une expérience agréable.

Le CSS solution de ce fil ne fonctionne pas pour moi (Android 2.x).

J'ai désactivé la transistion avec data-transition="none" de tous les liens et tout était ok. Il convient également de travailler lorsque réglé sur le niveau de la page, mais il ne fonctionne pas pour moi (jQuery Mobile 1.0). C'est le code:

// turn off animated transitions for Android
if (navigator.userAgent.indexOf("Android") != -1)
{
    $("a").attr("data-transition", "none");
}

L'autre (la meilleure) façon serait de définir la valeur par défaut des transitions pour jQuery Mobile:

$(document).bind("mobileinit", function()
{
    if (navigator.userAgent.indexOf("Android") != -1)
    {
        $.mobile.defaultPageTransition = 'none';
        $.mobile.defaultDialogTransition = 'none';
    }
});

iPhone effectue les transitions de l'accélération matérielle, tandis que les autres plates-formes effectuent par le logiciel. C'est ce qui explique pourquoi seuls les iPhone effectue des transitions en douceur.

Answer 3

J'ai essayé les autres suggestions mais aucune d'entre elles n'a fonctionné pour moi. J'ai finalement résolu le problème en modifiant la balise méta de viewport 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

Answer 4

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 aucune donnée-position = "fixé" 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%;
}
 

Answer 5

Votre application est-elle pour iPhone ou Android?

J'ai vu ceci posté à quelques endroits en tant que solution CSS possible pour le scintillement:

 #YourApp {
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}