iOS5 + transizione jquery-mobile lampeggia

Question

Sto provando a rimuovere un fastidioso effetto sfarfallio sulle transizioni jqmobile quando si esegue su iOS 5. Ho provato diversi metodi da altri post come -webkit-backface e ho fatto qualche altro lavoro ma non sono arrivato completo soluzione. Ho osservato che Flickr si verifica quando, prima della transizione, la pagina viene riposizionata a causa della barra di navigazione è spostato di un pixel (forse 2) dall'alto. Il problema inizia con l'inizializzazione o dopo la rotazione del dispositivo quando viene rasterizzata la pagina e quindi abbiamo due risultati di lavoro possibili,

1. Lavorare senza sfarfallio e atteso su ogni transizione.
2. Le cadute su ogni transizione visualizzate lampeggiano.

problema, naturalmente, è che si ottiene 1 o 2 in modo casuale quando il rendering di una nuova pagina. Grazie.

Answer 1

Una combinazione dei metodi here dovrebbe fare il trucco ...

Per gli altri che hanno questo problema, l'OP ha dichiarato che

Principalmente dati di posizione, webkit backface e gli altri non fornire una soluzione completa e ho impostato un css personalizzato da jqmobile 1,0 Pubblicato su un link github da suggerito da voi e, infine, lavora

Answer 2

tenta di aggiungere i dati di transizione, come specificato qui: Display issues when we change from one jquery mobile page to another in firefox

Ecco l'esempio della risposta di cui sopra:

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

Answer 3

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

Invece di posizioni di dati: fissato al l'intestazione/piè di pagina - ho applicato il seguente stili CSS per l'intestazione, il contenuto e piè di pagina:

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

Diverse persone sul forum al link sopra hanno affermato che questo ha aiutato con i flash in fase di transizione tra le pagine con data-position:fixed intestazione/piè di pagina.

Un altro suggerimento da Tod Parker (creatore jQuery Mobile) è stato questo:

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

che nasconde l'intestazione/piè di pagina fisso, mentre il passaggio da una pagina all'altra.

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

C'era anche un commit effettuato da un altro membro del team jQuery Mobile che dovrebbe mostrare-up nella prossima release. Ecco il post: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856 (il codice è un po 'complesso da postare qui)

Molto recentemente il problema è stato chiuso a causa di questo commit: https://github.com/Diveboard/jquery-mobile/commit/ff125b65e682ecd33888a6db1221ac441d258994. Questa correzione consisteva nell'impostare della pagina in entrata su -10 prima di scorrere e quindi reimpostare lo z-index in seguito.

Non ho provato nessuna di queste correzioni ma sembrano promettenti.

Answer 4

Se avete data-position="fixed" allora una soluzione è quella di utilizzare:

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

Answer 5

Per quanto mi riguarda, ho avuto lo sfarfallio e lampeggiante quando è stato installato uno scivolo nel pannello. Il lampeggiare è abbastanza divertente anche quando il pannello è nascosto, e per me si è verificato su elementi collassabili.

mio 'soluzione' è stato quello di aggiungere questo al mio file css: (come suggerito da http://api.jquerymobile.com/panel/) Con jQuery Mobile 1.3.1:

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

Quale sembra pazzesco - ma 'ha lavorato per me'. (Sì tutte le immersioni)

Sembra che non ci siano effetti collaterali visti - ancora.

Ho scritto programmi in OpenGL, ma non ho idea di cosa -webkit-transform: translate3d (0,0,0); farebbe.

Answer 6

Problemi comuni su Android 4.0+ per quanto ho scoperto utilizzando Cordova 2.9. e jQm 1.3: - transizione di pagina sfarfallio bianco anche quando transizione "none" specificato - rubinetti doppi necessari per fare una navigazione

provata su SGII, Motorola MC40, TC55, stessi problemi su tutte le piattaforme.

Usa stile personalizzato per l'intestazione, piè di pagina, il contenuto, rimuovere i dati-position = "fisso"

Uso inizializzazione jQm (essere consapevoli, posizionare il JS prima jQm includono)

.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 
});