Phonegap/jQuery mobile page transition flickering

Question

I'm newbie in Phonegap/jQuery mobile and I'm facing with white screen during page transition problem. I've tried to apply many solutions that I've found on web(for example -webkit-backface-visibility:hidden;) and still haven't solved the problem.

I've also set defaultPageTransition to none (in jQuery mobile .js file) and still nothing.

I mustn't turn off hardware acceleration because I need it for my iDangerous swiper menu. All my links look like this:

<a href='javascript:void(0)' class='news-main' onclick='someFunction()'>Some String</a>

When I click on link someFunction() is called. Method someFuction looks like this:

function someFunction(){
    //setting some value that I need in next page
    window.sessionStorage.setItem("someValue",someValue);
    window.location="next-page.html";
}

Everything works OK except that white flash during page transition. And it is showed only on some devices(for example Android 4+).

Is there any way to solve this issue? Or maybe I'm doing something wrong? Thanks in advance!

Answer 1

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

Answer 2

you need something before call Jquery mobile js do like this:

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
                <script type="text/javascript">
                $(document).bind("mobileinit", function()
                {
                   if (navigator.userAgent.indexOf("Android") != -1)
                   {
                     $.mobile.defaultPageTransition = 'none';
                     $.mobile.defaultDialogTransition = 'none';
                   }
                });
                </script>
                <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

thats enough refer

Answer 3

android:hardwareAccelerated="false"

Open your manifest and paste this inside application tag. Because your device hardwareAccelerated call every time

Answer 4

When building for higher Android targets the android:hardwareAccelerated is implicitly be set to true which is causing flickering during transitions with jQuery Mobile.

Setting it to android:hardwareAccelerated="false" will fix this. (I also have zoom and user scalable disabled)

http://developer.android.com/guide/topics/graphics/hardware-accel.html

Answer 5

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
                <script type="text/javascript">
                $(document).bind("mobileinit", function()
                {
                   if (navigator.userAgent.indexOf("Android") != -1)
                   {
                     $.mobile.defaultPageTransition = 'none';
                     $.mobile.defaultDialogTransition = 'none';
                   }
                });
                </script>
                <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

Answer 6

You can write your links as

<a href='javascript:void(0)' class='news-main' onclick='someFunction()' data-transition="none" >Some String</a>

as jquery mobile is not very smooth in page transitions.Hence we can choose to turn them off for the sake of now untill the latest version of jquery mobile with normal page transitions gets released.