Cordoba iOS - transition causes a page flash

Question

I am developing an application in Cordoba where the user can switch between several “screens”, which are only hidden divs that are displayed as a result of the transition.

Scrolling on iOS was terrible, so I added the -webkit-overflow-scrolling: touch element to the container element and it parsed the scroll problem I had.

However, since page transitions cause pages to flash every time the application goes to a new page.

Here is my CSS

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

After clicking the button to go to the next page, it uses this javascript code to go

 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 -webkit-overflow-scrolling: touch; from a scrollable class, it works great, no flash occurs. However, scrolling the page is terrible.

I am running iOS 9.3.1. I read about it and found out that this may be a problem with iOS 8+, but cannot find a diffine answer to help me

Answer 1

I suggest you use your own transitions with the Cordova app.

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

Answer 2

Add this CSS to classes having transitions:

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

It just speeds up hardware acceleration, so it becomes smoother than normal, and possibly fixes problems.