Flickering when navigating between pages

Question

My phonegap/jquery mobile application flickers most of the time when I navigate between the pages. Is this normal or is there a solution for this?

Answer 1

Is your app for iPhone or Android?

I've seen this posted in a few spots as a possible CSS fix for the flickering:

#YourApp {
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

Answer 2

I had the same problem, but even worse, when wrapping a Jquery mobile app in Phonegap. Not only were the page transitions flickering, but the UI was completely broken. I have tried most of the solutions suggested here, but nothing worked. Then I found this solution by Piotr Walczyszyn, and everything worked like a dream! Highly recommended for anyone using Jquery mobile and Phonegap together.

Answer 3

I got rid of the flicker on iOS! With static header and footer.

I have my css as below and no data-position="fixed" on the header and footer.

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"],
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active {
      overflow: hidden;
      -webkit-backface-visibility: hidden;
}

.ui-header {
    position:fixed;
    z-index:10;
    top:0;
    width:100%;
    padding: 13px 0;
    height: 15px;
}

.ui-content {
    padding-top: 57px;
    padding-bottom: 54px;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.ui-footer {
    position:fixed;
    z-index:10;
   bottom:0;
   width:100%;
}

Answer 4

This is a known issue that the team refers to as "blinking". They've said publicly that they will be tackling this soon and have already assigned someone to it. Here's a recent blog post that mentions it:

http://jquerymobile.com/blog/2011/05/06/jquery-mobile-team-update-week-of-may-2/

Answer 5

There are news (2012-01-10) about the flickering on Android, see http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/

Quote: exclude poorly performing platforms like Android 2.x from the more complex slide, pop and and flip transitions so these will fall back to the default fade for all transitions to ensure a smooth experience.

The CSS solution from this thread didn't work for me (Android 2.x).

I disabled the transistion with data-transition="none" in all links and everything was ok. It should also work when set on page-level, but it didn't work for me (jQuery Mobile 1.0). This is the code:

// turn off animated transitions for Android
if (navigator.userAgent.indexOf("Android") != -1)
{
    $("a").attr("data-transition", "none");
}

Another (the better) way would be to set the default transitions for jQuery Mobile:

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

iPhone performs the transitions hardware-accelerated, while the other platforms perform it per software. This explains why only iPhone performs smooth transitions.

Answer 6

I had the same problem and it was caused by duplicate ids across different pages in my HTML.

Even though the duplicate ids were in different html pages, JQuery Mobile compiles all your HTML files into one single HTML document, so that it can perform the page transitions.

This was resulting in invalid HTML and causing the blinking similar to what you describe.

Once I corrected the duplicate ids issue, all worked beautifully.

UPDATE: Stack Overflow Answer here explaining more about the duplicate ids issue in Jquery Mobile https://stackoverflow.com/a/8608474/271125