jQuery Mobile clignotant lors des transitions de page sur iPad

J'ai une application web construit avec jQuery Mobile qui fonctionne très bien lors de l'utilisation dans Safari sur l'iPad. Toutefois, lorsque vous l'ajoutez à l'écran d'accueil de l'utiliser comme une application autonome (avec le navigateur de navigation supprimées , alors les transitions de page "blink" rapidement après chaque transition de page.

J'ai Googlé sur ce et a constaté que le clignotement a été considéré comme un bug il y a longtemps, et, aujourd'hui, doit être fixe. Et il semble être dans Safari, mais pas de manière autonome à partir de l'écran d'accueil. Personne ne sait quelle en est la cause et comment y remédier?

N'ont rien à voir avec le fait que la barre de navigation n'est pas là? Il fonctionne de manière autonome sur iPhone bien, c'est que sur l'iPad il se produit...

Je l'accepte comme une réponse, même si quelqu'un peut me montrer que c'est un bug connu (pas un des vieux bugs qui ont déjà été corrigés, où il vacillait même dans Safari mode) ou si quelqu'un a l'intérieur de connaissances à ce sujet (personne n'a de réponse à ma question en jQuery forum...). Mais bien sûr, j'aimerais si quelqu'un avait une solution de contournement pour le problème!

source d'informationauteur Anders

ipad jquery-mobile

j'ai eu exactement le même problème

http://mailinglist-archive.com/rhomobile/2011-08/00656-Re+rhomobile+page+vue+et+les transitions mentionne quelque chose qui a fonctionné pour moi.

<style>
/*** patch for jquerymobile page flicker that was happending ***/
    .ui-page {
        -webkit-backface-visibility: hidden;
    } 
</style>

Je reçois toujours le scintillement dans la barre d'outils, donc j'ai converti ma barre d'outil pour :

<ul data-theme="b" data-role="listview" style="margin-top: 0;">
     <li data-role="list-divider">Your text goes here</li>...

7

J'étais nerveux au sujet de commenter l'accent, mais une recherche google trouve le code CSS suivant qui semble fonctionner:
```
.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
```
Lien d'origine: https://github.com/jquery/jquery-mobile/issues/2856

J'étais seule à avoir un problème avec la transition de diapo (même d'inverser la diapositive a bien fonctionné.
JQ 1.7.1
JQM 1.0.1
PhoneGap 1.5.0
3

De révision: Il convient de noter que la discussion ci-dessous a été atténué avec la sortie d'iOS 5.0. Elle peut être partielle d'un facteur d'influence pour quelqu'un qui n'a pas mis à jour, mais si vous êtes en cours d'exécution 5.0, Nitro est toujours présent. http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars

--réponse originale à cette question--
Apple a introduit le moteur Nitro javascript dans le navigateur Safari. Toutefois, ils ne l'ont installé sur le navigateur, pas dans la UIWebView (qui est ce que vous obtenez lorsque vous exécutez le formulaire de l'écran d'accueil ou intégrée dans une application comme PhoneGap.

Il y a eu une certaine spéculation si ce gain de performance a été omise sur le but. http://www.mobilexweb.com/blog/apple-phonegap-html5-nitro.

Donc, si il semble que c'est effectivement une exécution plus lente... c'est cause qu'il est vraiment. Ce n'est pas en utilisant le moteur de Nitro.

L'ajout de cette ligne

<style>
/*** patch for jquerymobile page flicker that was happending ***/
    .ui-page {
        -webkit-backface-visibility: hidden;
    } 
</style>

m'a aidé.

Je l'ai réparé avec:

<meta id="viewPortId" name="viewport" content="width=device-width; user-scalable=no" />

Ce que partiellement fonctionne pour moi:

<style>
body .ui-page
{ 
     height: 100% !important; 
     -webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>

$(document).bind("mobileinit", function () {
    $.mobile.defaultPageTransition = "none";
});

Qui empêchent de scintillement et de l'espace au bas de la page, mais notez que les transitions sont éteints.

Aussi, les id ne sont pas utilisés plus d'une fois qui je peux vérifier avec:

//an id used more than once??
    var ids = new Array();
    $.each($("[id]"), function () {ids.push($(this).attr("id"));});

    var matches, val1;
    for (var i = 0; i < ids.length; i++) {
        matches = 0;
        val1 = new RegExp(ids[i], "i");
        for (var i2 = 0; i2 < ids.length; i2++) {
            if (ids[i].length == ids[i2].length && val1.test(ids[i2]) == true)
                matches++;
        }
        if (matches > 1)
            alert("This id was used more than once: " + ids[i]);
    }

Avons également essayé:

$.extend($.mobile, {
        metaViewportContent: "width=device-width, height=device-height, minimum-scale=1, maximum-scale=1"
    });

Et le chargement de la page dans le DOM, et seulement une fois que c'est terminé, de faire la transition de la manière suivante:

var promise = $.mobile.loadPage(url, {
        pageContainer : $("body")
    });
    promise.done(function () {
        var newPage = $("body [data-role='page']:last").attr("id");
        $.mobile.changePage($("#" + newPage));
    });

Je suis encore en train de le scintillement sur les transitions de page.

la réponse.... jquery mobile page scintillement

1

Malheureusement, aucune de ces suggestions effectivement résolu le problème, du moins pas pour moi. Toutefois, enfin, il a été résolu dans la dernière version stable de jQuery mobile (1.1.0), de sorte que le problème est enfin parti! J'ai juste eu à aller dans et changement global de transition, de retour à la diapositive, car ils l'ont mis à s'estomper:
```
$(document).bind("mobileinit", function () {
    $.extend($.mobile, {
        defaultPageTransition: 'slide'
    });
});
```
Espère que cela aide quelqu'un d'autre qui peut-être n'avais pas remarqué la mise à jour.

Il semble que la suite de la balise META résout le problème:

<meta id="viewPortId" name="viewport" content="width=320; user-scalable=no" />

0

C'est un bug connu. Voir l'article dans la bord de mer liste de diffusion.

Rolf van der Vleuten remarqué:
- scintillement peut se produire lors de l'utilisation de la même #id, plus d'une fois dans une page,
  ce qui n'est pas rare lorsque vous utilisez un modèle de page de méthode. donc
  assurez-vous de ne pas utiliser #id, plus d'une fois.
- Je ne sais pas pourquoi cela arrive, mais j'ai trouvé que lors de ma première page avait
  un élément qui est indiqué par défaut, clignotement, c'était
  corrigé en ajoutant:
  
  input {
  outline: none;
  }
0

De la question ouverte, "Faites glisser la page de transition est à l'origine de l'écran de repeindre sur iOS 5 chromeless"la recommandation est de commenter pageTitle.focus() de la recentrer la fonction.

Ceci, cependant, ne résout pas mon problème. J'ai trouvé nécessaire de retirer les deux pageTitle.focus() et à la page.focus(), en gros, l'ensemble de la fonction.

Ce problème (et en particulier la modification de l'recentrer la fonction) est également mentionné dans le numéro Deux mille quatre cent soixante quatorze. C'est un correctif pour la version iOS4 qui n'a pas résolu mon problème iPad iOS5.
0

Cela semble être une très très étrange bug.J'ai essayé de corrigé.Mais a échoué.Enfin j'essaie d'ajouter un peu de code pour mon projet afin d'éviter ce problème.

Si vous profondément dans jquery mobile de transition de page vous connais son principe.

Il charge une autre page (la page que vous voulez aller) corps en un élément tel que : .

Je viens d'ajouter un wrapper en dehors de cet élément et de faire un setTimeout pour retarder montrant cette page.

J'ai fait un phonegap app de l'iPhone 4(ios5) et ne peut pas résoudre ce problème.Juste prier pour que jquery mobile, l'équipe de corriger ce bug rapidement.Après avoir passé quelques jours sur ce problème, je veux juste fuxk jqm...

Cela ne fonctionnait que partiellement pour moi

<style>
body .ui-page
{ 
     height: 100% !important; 
     -webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>

pour la transition des données "flip" il a travaillé, mais pas pour "glisser"

Vous devez vous connecter pour publier un commentaire.