Jquery-Mobile Page Transitions - Flickering (Separate Pages)

JQuery-Mobile Page transitions - flickering (separate pages)

Work-around Solution

So, these are the things I tried:

data-transition="none" / $.mobile.defaultPageTransition = 'none';
.ui-page { backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Chrome and Safari */ -moz-backface-visibility: hidden; /* Firefox */ }
delete meta.attr( "content", disabledZoom ); & meta.attr( "content", enabledZoom ); in jquery.mobile.js
-webkit-transform:translate3d(0,0,0);
data-position="fixed" headers/footers
deactivating user scale in meta tags

It did not work for "Homescreen-App"/"PhoneGap-App"
I also applied body{ background-color: black !important } to make the blink appear more subtile , which worked but was still ugly.

So I found a work-around solution: jQuery 1.1.0 RC2 and jQuery 1.7.1: no flickering when data-transition is set to none.

Flickering page transitions in Jquery mobile app

The only real way to prevent the "flickering" is to disable the jQuery Mobile page transitions altogether. In the <head> of your document, place this code:

// load jQuery
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

// load your custom jQuery Mobile Defaults
<script type="text/javascript" src="mobile/js/mobile-site-custom-jqm-defaults.js"></script>

// load jQuery Mobile
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

// load your scripts.js (your javascript & functions, etc.)
<script type="text/javascript" src="mobile/js/script.js"></script>

To disable transitions, inside of the mobile-site-custom-jqm-defaults.js file, place this code:

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

Why do the pages blink/flicker after transitions in my jQuery Mobile PhoneGap app on iOS?

This guy solved the problem - it worked for me:

http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/

CSS:

body {
    /* Setting body margins to 0 to have proper positioning of #container div */
    margin: 0;
}

/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
    position: absolute;
    width: 100%;
    height: 100%;
}

JS:

$(document).one("mobileinit", function () {

    // Setting #container div as a jqm pageContainer
    $.mobile.pageContainer = $('#container');

    // Setting default page transition to slide
    $.mobile.defaultPageTransition = 'slide';

});

And wrap all your jQM pages in a single <div id="container">

How to fix flickering issue in Jquery Mobile

Where you are getting a flickering? On Android or on every device?

Anyway, you can try to use their recommendation:

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

Another check that you can try is here.

Jquery-Mobile Page Transitions - Flickering (Separate Pages)