Flickering when navigating between pages

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?

.ui-page {
    -webkit-backface-visibility: hidden;
}

This worked for me on phonegap / jquery mobile / Android phone.

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.

I tried the other suggestions but none of them worked for me. I ended up fixing it by changing the viewport meta tag as follows:

<meta name="viewport" content="width=device-width, user-scalable=no" />

Thanks to http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

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%;
}

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;
}

FIY: I used the CSS fix last week and while moving on I encountered another problem.

My app has a contact page - pretty straight forward by following the description provided here ( http://jquerymobile.com/demos/1.0a4.1/docs/forms/#forms-text.html ).

However as soon as focussing a text input field the page is "jumping" (read scroling) up and down. Sometimes it also jumps when typing in text. It is kinda hard to describe cause the behavior is quite random but there is a discussion about it. The idea to deactivate the flickering fix comes from there as well. https://github.com/jquery/jquery-mobile/issues/2683#commits-ref-d195354

Still struggling to find a "proper" solution but in case you have no keyboard input I guess it will work fine!

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/

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

When using CSS solution

.ui-page {
    -webkit-backface-visibility: hidden;
}

you may encounter other issues, so it's not a good idea.

Actually, jQuery mobile v1.1.0 has issues with transitions. Look at this and this.

In the of your document, place this code:

<script src="disableTransition.js"></script>

To disable Flickering transitions, inside of the disableTransition.js file, place this code

$(document).bind("mobileinit", function(){
 $.extend(  $.mobile , {
 defaultPageTransition: 'none' 
});

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

Solved for me on Android.

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.

Check this link , i had same issue so i documented it.

Link content:

> I am developing a phoneGap android project which is using JQM. My > Project contains Fixed External header and External Panel. > > While navigating from one page to another, I see a white blink ( Entire > Page) for a brief moment which is odd. I searched online but now > proper information and lot of code change on JQM Core file. After a > long research, I figured it out and want every one know about it. > > Fix: Change

<meta name = "viewport" content="width=device-width, initial-scale=1" />

> To

<meta name = "viewport" content="width=device-width, user-scalable = no" />

https://shariefmohatad.wordpress.com/2014/06/12/blinkingflickering-with-jqmobile-and-phonegap-aka-phonegap-on-android-2/