3

I am testing a mobile web application built in jQuery Mobile 1.1.0. I am testing the website application using my Galaxy Nexus running on android 4.0. There is a nasty flicker on the CSS swipe transition and i have looked around for fixes and found this:

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

However, when i use this fix, the index page which has a listview does not display. Please help me. What could be the problem?

realnsleo
  • 709
  • 2
  • 12
  • 29
  • Had a similar issue here: http://stackoverflow.com/questions/10401938/jquery-mobile-listview-phantom-not-refreshed-in-android-4 – Ryan Jun 14 '12 at 14:17
  • See my answer to this question, I got it working: http://stackoverflow.com/a/12749862/561545 – Jeff Oct 05 '12 at 16:00
  • In case you need only transitions from jQM it`s better to use https://github.com/PixelsCommander/Mobile-Transitions - no blinks, better perfomance, easier to use. – PixelCommander Nov 27 '12 at 13:29

3 Answers3

4

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

// 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'
  });
});
adamdehaven
  • 5,890
  • 10
  • 61
  • 84
4

I found on network this solution:
if (navigator.userAgent.indexOf("Android") != -1) { $.mobile.defaultPageTransition = 'none'; $.mobile.defaultDialogTransition = 'none'; }
I tested it on Android app written with use of cordova 2.2.0, jquery 1.8.2 and jquery mobile 1.2.0. And I must say it works. I hope the jquery mobile dev team will solve transitions flickering but now the only way is to turn them all off. I want to add that I checked all css tricked from first 30 google searches on this topic.

Marek Bar
  • 873
  • 3
  • 16
  • 31
  • 1
    This bug has been around as long as JQueryMobile and is likely the most famous. Don't count on it being fixed any time soon. – Halsafar Jul 17 '13 at 19:08
0

It didn't work for me too (especially in iOS). Then I used 

<a href="index.php" data-transition="none">Index</a>

It worked for me. Page transition

MikeSmithDev
  • 15,731
  • 4
  • 58
  • 89
Ikrom
  • 4,785
  • 5
  • 52
  • 76