rel=“external” and white flickering (phonegap + jquery mobile)

Question

I know there are questions on this issue, but I tried everything and do not fix my mistake! X__X

I have a mobile application (astronomical) for Android and when I use to load another html, in the transition makes a white flash that I can't remove (I tried removing the transitions "slide" to use and nothing, background: # 000000! important, etc. ..). I use jQuery mobile 1.3.1 and Phonegap 2.9.0.

I'll share a video where you can see better the problem: http://www.youtube.com/watch?v=ykjCN03nOCM

Any help??

Regards, Daniela.

Amit Prajapati Amit Prajapati · Accepted Answer · 2013-09-09T04:04:54

CSS :

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

Code : The CSS solution from this thread didn't work for me (Android 2.x).

I disabled the transistion with data-transition="none" in all links and everything was ok. It should also work when set on page-level, but it didn't work for me (jQuery Mobile 1.0). This is the code:

        // turn off animated transitions for Android
        if (navigator.userAgent.indexOf("Android") != -1)
        {
            $("a").attr("data-transition", "none");
        }

Another (the better) way would be to set the default transitions for jQuery Mobile:

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

iPhone performs the transitions hardware-accelerated, while the other platforms perform it per software. This explains why only iPhone performs smooth transitions.

rel=“external” and white flickering (phonegap + jquery mobile)

2 Answers