Blog

Earlier we blogged on how to eliminate flickering on Android when navigating between pages. This is a follow up post with additional tips.

There are plenty of different questions/solutions on how to resolve the flickering problem. We think the following is a pretty good general solution.

In the original post we mention Android but have heard since then that it also happens on iOS devices.

To resovle the flickering problem, add this JavaScript to your app (Project > Create New > JavaScript):

$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';

Just in case you need to target a specific OS, you can modify the code like this (shown for Android):

if (navigator.userAgent.indexOf("Android") != -1) {
   $.mobile.defaultPageTransition = 'none';
   $.mobile.defaultDialogTransition = 'none';
}

Once you add this code, you need to use only the Default transition for navigation. If you use any other transition effect, you will get back the flickering.

The next thing you can try is to hide the Ajax loader (shown on service invocation and page transitions). Project > Create New > CSS and enter this code:

#ajaxBusy {display: none !important;}

This should make transitions even smoother.

Lastly, you can also try what jQuery Mobile team suggests (see Important section in yellow).

Let us know if these workarounds work for you.