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

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

Answer 2

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.

Answer 3

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/

Answer 4

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.

Answer 5

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

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

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!