Search code examples
cssjquery-mobileweb-applicationscordova

JQuery-Mobile Page transitions - flickering (separate pages)

I spend the day figuring out how to fix the flickering between page transitions in JQuery-Mobile 1.3.1.

I found that

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

or setting the data-transition to none

or removing meta.attr( "content", disabledZoom ); and meta.attr( "content", enabledZoom ); from JQM file

helped.

But apparently that is only working if the webapp is just one "multi-page".

I am using 4 separate pages.

In iOS (mobile Safari) and on PC (Browser: Chrome) I don't have any transition flickering. But as soon as I add the App to to the Homescreen it flickers again.

Here I read that there is no possibility in avoiding page flickering for (PhoneGap/Homescreenapp) if there are separate HTML files in use: https://groups.google.com/d/msg/phonegap/tqdv3tYIj_o/qfft32VbLg8J

Is there no solution for this?

Solution

  • Work-around Solution

    So, these are the things I tried:

    • data-transition="none" / $.mobile.defaultPageTransition = 'none';
    • .ui-page { backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Chrome and Safari */ -moz-backface-visibility: hidden; /* Firefox */ }
    • delete meta.attr( "content", disabledZoom ); & meta.attr( "content", enabledZoom ); in jquery.mobile.js
    • -webkit-transform:translate3d(0,0,0);
    • data-position="fixed" headers/footers
    • deactivating user scale in meta tags

    It did not work for "Homescreen-App"/"PhoneGap-App" I also applied body{ background-color: black !important } to make the blink appear more subtile , which worked but was still ugly.

    So I found a work-around solution: jQuery 1.1.0 RC2 and jQuery 1.7.1: no flickering when data-transition is set to none.