5

I believe this post is the resolution to my trouble Flickering when navigating between pages . Specifically:

$(document).bind("mobileinit", function()
{
   if (navigator.userAgent.indexOf("Android") != -1)
   {
     $.mobile.defaultPageTransition = 'none';
     $.mobile.defaultDialogTransition = 'none';
   }
});

I am coming from the C# world and pretty much clueless as to jQuery mobile. I would like to add this snippet but not sure where. If it matters I think that I would add it to jquery.mobile-1.1.0.rc.1.js but then I don't know where in there, If that's the right file.

Community
  • 1
  • 1
GPGVM
  • 5,515
  • 10
  • 56
  • 97
  • I just noticed you're using jQuery Mobile 1.1.0 RC-1, you really should update to 1.1.0 Final: http://jquerymobile.com/download/ – Jasper May 02 '12 at 15:55

2 Answers2

14

This code must be run after you include jQuery Core and before you include jQuery Mobile. The reason is that to run the code, jQuery must be present, but this event handler needs to be bound before jQuery Mobile initializes.

For example:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function()
{
   if (navigator.userAgent.indexOf("Android") != -1)
   {
     $.mobile.defaultPageTransition = 'none';
     $.mobile.defaultDialogTransition = 'none';
   }
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

Documentation: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

Also, the UA sniffing isn't necessary because jQuery Mobile tests the device for CSS 3D transform support and only uses the nice transitions on devices that support them. This is done for you in jQuery Mobile 1.1.0+, but the default fallback transition is fade so you'd have to change that default anyway.

Defining fallback transitions for non-3D support

By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.

The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":

$.mobile.transitionFallbacks.slideout = "none"

Source: http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

As a general observation I noticed that you put the if/then statement inside the event handler, you might as well put it outside so if it isn't an Android device the event binding/firing never has to occur.

For example:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
if (navigator.userAgent.indexOf("Android") != -1)
{
    $(document).bind("mobileinit", function()
    {
      $.mobile.defaultPageTransition = 'none';
      $.mobile.defaultDialogTransition = 'none';
    });
}
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
Jasper
  • 75,717
  • 14
  • 151
  • 146
  • WOW! That was very verbose and VERY helpful! Thank You! As for the location of the code....Ahhh well that shows how little I know. I was thinking to put it in one of the js files but really it goes inline in the html doc. – GPGVM May 01 '12 at 17:45
  • @user1278561 You *could* place the code at the end of the jQuery Core file, because at that point jQuery Core will be available to do the event binding but jQuery Mobile won't have initialized yet. – Jasper May 01 '12 at 23:32
0

I do have the same problem, and none of the solutions online seemed to work. I am testing on a galaxy mini with Android 2.3.6 and even fade was terrible in terms of UX.

Fiddling around with my code, out of luck I found that this improved my performance somewhat

$(document).on("mobileinit", function(){
        $.mobile.defaultPageTransition = 'slide';
        $.mobile.transitionFallbacks='none';
});

And as if by miracle, no flickers ! Some glitching occurs occasionally, but it is definitely better than before!

Dio
  • 348
  • 2
  • 12