Perché le pagine lampeggiano/sfarfallano dopo le transizioni nella mia app jQuery Mobile PhoneGap su iOS?

Question

Ho un'app mobile jQuery che ho convertito in un'app iOS utilizzando PhoneGap. Sto usando la versione 1.1.0 di jQM.

Sto usando le transizioni "dissolvenza" tra le pagine (mentre leggevo erano meno esigenti).

Quando inizialmente si eseguiva la versione di PhoneGap dell'app su iPhone Simulator, si verificava uno sfarfallio/flash dopo ogni transizione di pagina, come se la pagina venisse visualizzata, cancellata e quindi visualizzata di nuovo, il tutto con una frazione di secondo. Qualche cosa è successo quando l'ho eseguito sul dispositivo.

Ho applicato il consiglio nella risposta di Sarah-Jane a un similar question.

Questo ha risolto il problema nel simulatore, ma non sul dispositivo reale.

Qualcuno ha riscontrato questo problema e ha trovato una soluzione?

Answer 1

Questo ragazzo ha risolto il problema - ha funzionato per me:

http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/

CSS:

body { 
    /* Setting body margins to 0 to have proper positioning of #container div */ 
    margin: 0; 
} 

/* #container div with absolute position and 100% width and height so it takes up whole window */ 
#container { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

JS:

$(document).one("mobileinit", function() { 

    // Setting #container div as a jqm pageContainer 
    $.mobile.pageContainer = $('#container'); 

    // Setting default page transition to slide 
    $.mobile.defaultPageTransition = 'slide'; 

}); 

e avvolgere tutte le pagine jQm in un single <div id="container">

Answer 2

La transizione di dissolvenza lampeggia in gran parte dovresti cambiarla in diapositiva o in un'altra modalità di transizione.

Answer 3

uso seguente codice

$(document).ready(function() 
{ 

    $.mobile.defaultPageTransition = "none" 
    $.mobile.defaultDialogTransition = 'none'; 
    $.mobile.useFastClick = true; 
    $.mobile.touchOverflowEnabled = true; 

}); 

Answer 4

che potrebbero aiutare

<meta name="viewport" content="width=device-width, user-scalable=no" />