javascript - PhonegapjQuery mobile page transition flickering - Stack Overflow

admin管理员组

文章数量:1318580

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!

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!

• javascript
• android
• jquery
• cordova
• jquery-mobile

Share Improve this question Follow edited Feb 4, 2016 at 10:34 Xan 77.6k1818 gold badges197197 silver badges217217 bronze badges asked May 27, 2013 at 17:25 KolovratKolovrat 4911 silver badge66 bronze badges 1

• See stackoverflow./a/16692917/104746 --- Setting viewport to user-scalable=no fixed the problem for me. – Yaakov Belch Commented Aug 6, 2013 at 15:35

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

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

android:hardwareAccelerated="false"

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

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

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./guide/topics/graphics/hardware-accel.html

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

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.

本文标签： javascriptPhonegapjQuery mobile page transition flickeringStack Overflow