jQuery Mobile: changepage slide transition working fine on a desktop but not on Android devices

Question

$('div.ui-page').live("swipeleft", function () {
    var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length > 0) {
        $.mobile.changePage(
            nextpage,
            {transition: "slide"},
            true,
            true
        );
    }else{
        $.mobile.changePage(
            "#page3",
            {   transition: "slide", 
                reverse:true
            }, 
            true, 
            true
        );
    }
});

The code is working great on a desktop browser, and iOS so far. But when I run this code on an Android device, the page blinks then moves to the next page. It should fire the slide transition option but no slide effect was shown.

How should I set the slide effect on an Android web app or mobile browser? I already tried the $(id).animate method but no luck. I don't know what I should do to trigger the slide effect.

Is there any android developer who already tried the swipe function? Can anybody tell me what I should do to adjust the slide effect of $.mobile.changePage ?

Answer 1

http://jquerymobile.com/test/docs/pages/page-transitions.html

Only seeing fade transitions? To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).

To check whether your android support it, add that snippet into your javascript

window.onload = function () {
var b = document.body.style;
if(b.MozTransition=='' || b.WebkitTransition=='' || b.OTransition=='' || b.transition=='') {
    alert('supported');
} else {
    alert('NOT supported')
}

}

Answer 2

What roine said is true. The browser says it does not support the transition. However... let's not agree with the browser and do it anyway. In jQuery mobile change:

// If transition is defined, check if css 3D transforms are supported, and if not, if a fallback is specified
$.mobile._maybeDegradeTransition = function( transition ) {
        if ( transition && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ transition ] ) {
            transition = $.mobile.transitionFallbacks[ transition ];
        }

        return transition;
};

to:

$.mobile._maybeDegradeTransition = function( transition ) {
    return transition;
};

And there you go it works.

But you have to understand the browser does not say it doesn't support it for no reason. For example the browser on Android will fail on first transition (not Chrome).