Cordova iOS - transition causes page flash

Question

I am developing an application in Cordova, where the user can switch between a few 'screens', which are just hidden divs brought into view by a transition.

The scrolling on iOS has been terrible, so I added -webkit-overflow-scrolling: touch to the container element and it sorted out the scrolling issue I had.

However, since then the page transitions cause the pages to flash each time the application moves to a new page.

Here is my CSS

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

Once a button is pressed to proceed to the next page it uses this javascript code for the transition

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>

If I remove the -webkit-overflow-scrolling: touch; from the scrollable class it works fine, no flash happens. However, the scrolling of the page is terrible.

I am running iOS 9.3.1. I read around and found out this may have been an issue from iOS 8+ but can't really find a difinitve answer to help me

Answer 1

I suggest you to use native transitions with cordova´s app.

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

Answer 2

Add this CSS to the classes that have transitions:

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

It just force hardware acceleration, so it become smoother than the normal one, and probably fix your issues