How can I improve the page transitions for my Jquery mobile app?

Question

I have created a tiny Jquery Mobile app in a single HTML page. The problem I am facing is that the performance of page transitions in Mobile devices is horrendous. After I s

Answer 1

There are few ways:

• In case you are using ! html file with multiple pages, wrap them into single div:

  <div id="container"/>
  

and set this css:

    body {
        margin: 0;
    }

    #container {
        position: absolute;
        width: 100%;
        height: 100%;
    }

js code:

    $(document).one("mobileinit", function () {
        $.mobile.pageContainer = $('#container');
        $.mobile.defaultPageTransition = 'slide';
    });

More about this aproach can be found here: http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/

• Other common solution is to set this css: .ui-page { -webkit-backface-visibility: hidden; }

The problem with that solution is that it breaks Select list on your forms.

• Turn them off:

  $(document).bind("mobileinit", function(){
      $.mobile.defaultDialogTransition = "none";
      $.mobile.defaultPageTransition = "none";
  });
  

• Use fastclick on jquery mobile apps to speed click events thus speeding page transitions. Click events can add up to 300ms into page transition. This plugin will do much more then this but in your case it will be enough.

Link: https://github.com/drowne/jquery.mobile.fastclick

• In case you don't want additional plugins you can still achieve faster page transition by removing href from page changing buttons and then doing this:

  <a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
  
  $('#back-btn').bind('touchstart', function(e) {
      $.mobile.changePage("#pageID");
  });
  

The touchstart (or touchend) event works great if you know the user won't be scrolling. That's actually the reason click events take so long to resolve on mobile devices, the device is waiting to see if the user is scrolling or clicking. So touchstart should not have a delay like common click/tap event.

I hope some of this solutions will help you. Take into consideration, these are not bulletproof solution and they have downsides of they own.

Answer 2

Thank you Gajotres.

I've replaced "touchstart" with a vclick and added preventDefault(), otherwise I ended up with quite a few pagechangefailed events.

<div data-role="page" id="event" data-theme="b" style="background: transparent;">
  <div data-role="header" data-theme='b' data-position='fixed'>
    <a class="ui-btn-left" data-icon="arrow-l" id="bhome" href="#">Back</a>
...

// Fastclick on back button - gets rid of the 300ms delay
$("#bhome").live('vclick', function(e) {
    e.preventDefault();
    javascript:history.back(1);//   $.mobile.changePage("#home", {transition:'fade'});
});

During development, I think it's a good thing to add the following event handler to ensure that no errors happen :

$(document).bind("pagechangefailed", function(event, data) {
    $.mobile.loading('hide');
    alert("pagechangefailed"); 
});

Answer 3

As for global css performance fix, try the JQM CSS survival kit, which is a small css tool to fix specific performance problem.