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?

Hygrometric

Answer 1

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

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

Postwar

@Postwar yes worked for me too on jquery mobile, how if i have seperate pages 1.html,2.html,3.html – Capias

Be careful. This 'fix' broke some of our forms on Android 2.3, this prevents you from choosing options in selects. Strangely enough Android 2.2 and 4.0 were fine, as was any version of iOS we could find. – Counterwork

This still works for me with an iPad2/iOS 5.1, PhoneGap 1.4 and jQuery Mobile 1.1.0-RC1. Thank you! – Allegedly

Answer 2

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.

Ious

I had to do some fixes in an old project and this tip finally helped me, thanks! – Underachieve

I had to comment also, the second way ("the better way") just fixes everything!!! Thanks A Lot! – Altercate

Answer 3

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

Valorize

This solution worked for me. Android 4.2.2, JQM 1.3.1 and Phonegap 2.8 – Becalmed

This is the right solution...work for me on android 2.3 (htc desire) and 4.2 (samsung table) too. – Tunnage

Adding "user-scalable=no" fixed it for me (Android 4.0.3 HTC Rezound) – Seften

Works for Android 4+ and Phonegap 2.9 – Unstuck

Worked for me Android 4.2, Jquery Mobile 1.4.2, Phonegap 3.4.1 – Bakunin

Answer 4

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

Standfast

Answer 5

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

Inga

Where do I have to set this css fix? In my jquery.mobile-1.0a4.1.min.css? – Hygrometric

I would leave the jquery css file alone. Are you not working with your own CSS file? If so, add it there and target the body tag. Like: body { -webkit-backface-visibility: hidden; overflow: hidden; } – Inga

Still not working. I tried this but the flicker stays. This css works -webkit-transform:translate3d(0,0,0) but the screen goes up and down if I type in a form. – Hygrometric

Answer 6

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!

Gregor

Answer 7

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/

Cenac

Answer 8

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://mcmap.net/q/146198/-jquery-mobile-duplicate-ids-within-pages-ok

Edema

Answer 9

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.

Seale

Answer 10

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.

Shamrock

Answer 11

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.

Sporades

Answer 12

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/

Heelpiece