Blinking/Flickering with Jqm and Phonegap on Android

Blinking/flickering with JQM and PhoneGap on Android

Setting viewport to user-scalable=no fixed the problem for me: 

Change

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

to

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

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">

Phonegap/jQuery mobile page transition flickering

Try as below

<a href='#' class='news-main' id='mylink'>Some String</a>

JS

$(document).on('pagecreate', function(){
  $('#mylink').bind('click',function(){
      someFunction()
  });
});

function someFunction(){
  window.sessionStorage.setItem("someValue",someValue);
  $.mobile.changePage("next-page.html");
}

---

Related Topics