Problema di rendering di PhoneGap e Galaxy s4

Question

Sto riscontrando un problema strano sul dispositivo GS4 quando si utilizza PhoneGap, dove alcuni dei miei elementi della mia app Web non vengono visualizzati correttamente quando viene eseguito il rendering della pagina, ma una volta che si fa clic o si fa clic su quella pagina , il layout degli elementi correttamente. Una finestra bianca tremolante accumulata di tanto in tanto prima di tradurre eventi nella mia applicazione.

Il problema si accumula su GS4 e non viene mai accumulato quando provo su altri telefoni come GS4, Note o IPhone.

Answer 1

Questi elementi sono generati dinamicamente? Anche io ho avuto lo stesso problema, ho capito, in realtà ha bisogno di un po 'di accelerazione hardware (accelerazione GPU). Dovremmo abilitare il rendering 3d con css. Basta usare

transform: translateZ(0); 

per l'elemento particolare. Questo ha funzionato per me, provalo, potrebbe funzionare per te.

pls controllano questo link

Answer 2

tentativo di manipolare con altri elementi, come:

$('#footer').fadeTo(1,0.99,function(){ 
    $('#footer').fadeTo(1,1); 
}); 

Answer 3

il problema in breve: android. A seconda della versione su cui è in esecuzione GS4, il browser Web funziona in modo diverso e genera problemi diversi. IE ho creato un'app per PhoneGap che ha funzionato bene e quindi NON FUNZIONA A TUTTI in jellybean. inutile dire che ora sono nativo. Tuttavia, usa translate e 3d transforms nei tuoi elementi che fa ridisegnare tutti gli elementi con l'accelerazione hardware e impone un ridisegno degli elementi se vengono iniettati dinamicamente nel DOM

Answer 4

Ho avuto problemi simili con una galassia trend (Android 4.0.4): alcuni cambiamenti nella pagina non sono stati mostrati correttamente (ridisegnando alcuni elementi, nascondendo/mostrando altri) fino a quando non tocco lo schermo, mentre funziona perfettamente su qualsiasi altro dispositivo che ho testato (da Android 2.3 a 4.4).

Ho testato molte patch trovate nello stack overflow e in altri luoghi: aggiungi transcate3d in css, query width degli elementi ... nulla ha avuto effetto;

È solo quando ho aggiunto $myPage.find("[data-role=footer]").hide(0).show(0); che la mia pagina ha finalmente eseguito correttamente il rendering della galassia.

Nel mio caso penso che funzioni perché costringe il ridisegno del piè di pagina e gli elementi che sto nascondendo/mostrando si trovano nel piè di pagina.

Forse forzare il nascondino su altri elementi potrebbe aiutare nel tuo caso?