Cordova iOS - transizione causa flash di pagina

Question

Sto sviluppando un'applicazione in Cordova, in cui l'utente può passare da alcuni "schermi", che sono solo div nascosti mostrati da una transizione.

Lo scorrimento su iOS è stato terribile, quindi ho aggiunto -webkit-overflow-scrolling: touch all'elemento contenitore e ha risolto il problema di scorrimento che avevo.

Tuttavia, da allora le transizioni di pagina fanno lampeggiare le pagine ogni volta che l'applicazione si sposta su una nuova pagina.

Ecco il mio CSS

.scrollable { 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

Una volta che viene premuto un tasto per passare alla pagina successiva che utilizza questo codice javascript per la transizione

this.lastScreen.getLayout().getElement().css({ 
    'left': -$(window).width(), 
    'transition': 'left 0.25s ease-out' 
}); 

this.currentScreen.getLayout().getElement().css({ 
    'left': 0, 
    'transition': 'left 0.25s ease-out' 
}); 

<div class="container scrollable"> 
    //screen content here 
</div> 

Se rimuovo il -webkit-overflow-scrolling: touch; dalla classe scorrevole funziona bene, non accade alcun flash. Tuttavia, lo scorrimento della pagina è terribile.

Sono in esecuzione iOS 9.3.1. Ho letto e scoperto che potrebbe trattarsi di un problema da iOS 8+ ma non riesco a trovare una risposta difinitve per aiutarmi a

Answer 1

Ti suggerisco di utilizzare le transizioni native con l'app di cordova.

http://plugins.telerik.com/cordova/plugin/native-page-transitions

Answer 2

Aggiungi il CSS per le classi che hanno transizioni:

-webkit-transform: translate3d(0px,0px,0px); 

E 'solo forza di accelerazione hardware, quindi diventa più agevole rispetto a quella normale, e probabilmente risolvere i vostri problemi