Eliminating annoying flicker transitions with jQuery Mobile on Android

I’ve been using PhoneGap along with jQuery Mobile to do some protoyping work for a client on a range of mobile devices.  When testing on Android 2.2 (HTC Desire in my case), I noticed a nasty flicker on the CSS swipe transition. Seems others have seen this too. On my device it seems to occur once at the start of the transition, and once at the end.

Anyways, after much googling, the stackoverflow magic that fixes it seems to be to do with the -webkit-backface-visibility tag. After I added the magic CSS to my jQuery Mobile page tags life was flicker-free again. Here’s the magic sauce I had to add to my CSS when using PhoneGap 0.9.6 and jQuery Mobile 1.0 beta 1:

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

And say goodnight to the dreaded Android flicker!

51 thoughts on “Eliminating annoying flicker transitions with jQuery Mobile on Android

  1. Whoa.. Seriously just saved my project!! Now if I can only stop the flicker of the fixed position nav bar…

    Thanks!

  2. Problem with this workaround though, is that if you use the Android native select dropdowns (i.e. add the data-role=”none” attribute to them), they are no longer selectable.

    I believe it is because of the way Android natively shows select dropdowns in a little pop up thing.

  3. Doesn’t work!

    I created an android project in eclipse. Just a few blank html file sin the assets/www pointing to eachother, and I’m not using jQuery yet.
    Still the black transition appears.

    Can anyone tell how this is solved, because I’ve seen that this is an issue since beginning of 2011 already.
    The link to the workaround https://github.com/phonegap/phonegap-android/commit/361a7aacc5ed1257e11d0c676a940188b7e7922d
    is frankly quit unclear as to what to do with it. SPecially if you’re new to Phonegap.

  4. Isnt everybody got the problem with the Select menus while we use this solution? I am facing it….. Select menus are not at all working..
    In addition at the place I used auto complete in a input field.. there it boules the page while typing

  5. Doesn’t work in Android 2.3 (after upgrade from 2.2) on Samsung Galaxy Tab – very much of flickering – not usable. Fix makes also select menus unusable.

  6. working fine.. but its effecting my input text field when am using this code. can anyone resolve that problem with out effecting the input text field.

  7. This work for me (whit some adjustments) because this property makes my input and select fields unusable.

    So, my solution was something like:

    in my case, inside the touchstart method i put something like this:

    var page = $(“#somepage”);
    page.css(“-webkit-backface-visibility”,”hidden”);
    $.mobile.changePage(“#somepage”, {transition: “slide”});
    setTimeout(function () {
    page.css(“-webkit-backface-visibility”,”visible”); }, 500);

    Works great. tks

    • · By ‘the touchstart method’, do you mean inside the ‘function handleTouchStart( event ) ‘ – body inside jquery.mobile-1.01.min.js?
      · If i have many pages (divs with data-role=”page”..), what to put insted of ‘#somepage’ ?
      I am new to this, so pleas have mercy on me. Thanks.

  8. doesn’t works for me,,, it does fix the flicker transition, but still the select boxes are frozen…. this si so frustrating,,, everything works like a charm in iPhone…

  9. Thank you sir.You are genious.Great job, was thinking that my function was getting called twice, turned out to be a css issue.

  10. Didn’t work for me iOS. Still had the white screen flickering everytime I navigated to another page with a transition.

    I changed the background value for .ui-mobile and .ui-mobile-viewport to the exact same value as I set for the background of .ui-page .. The white flash is gone now.

  11. Its great the flickering is out, but now one more issue is appearing specially with the pages with input field. In HTC, a new Text box is appearing on top of the existing text box and on typing the input box is start jumping. Do you guys have any fix for this (of course with using -webkit-backface-visibility: hidden; )

    Thanks.

  12. Awesome, this fixed the same issue using a homescreen webapp built with jQuery Mobile.

    Thanks

  13. still facing same problem after use same code after jquery.css file
    .ui-page {
    -webkit-backface-visibility: hidden;
    }

    please help ,its so frustrating moment for me.

  14. That’s PERFECT!! Thank you so much!! After googling and googling I never found a solution until today that I found this while I was searching other things not related XD

    Did you inform to jquery mobile team?? This should be included in the next release!!

  15. I know someone already asked this question but exactly where does the piece of code go for this ? In one of the jquery css files in my main css file???
    Thanks

  16. Thank you very much. Please add a donate button or something similar to your page! That saved me a lot of money!

  17. Well i am facing the issue of flickering tab bar while transitioning … dont know whether this work around would help or not…. anyone else having this issue?? The bottom bar appears in place of top bar during transition though all of them are ‘data-position=”fixed”‘ ….. dont know what to do

    • There are many issues with data-position=fixed thingy.. U can look into forums on jquerymobile which discusses this issue predominantly.

  18. yeah that didn’t work for me on IOS, but I used as mentioned above and that did the trick! now everything works awesome and smooth!

    .ui-mobile {
    background:#000
    }
    .ui-mobile-viewport {
    background:#000
    }
    .ui-page {
    background:#000
    }

  19. Thank you for the post.
    If the solution provided doesn’t work as is, try it out along with
    .x-panel {
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    }

    in the css file.
    The combination worked for me. I have tabs in the bottom of my page.

  20. Fantastic! I’ve just started working on JQuery mobile website and found your solution, thanks alot.

    cheers

  21. Ya know, this did fix that flicker on Android for me, but it introduced an iOS bug that was worse. It made my fixed jQM header and footer tabbar disappear sometimes in iOS only. This was a most unfortunate and unhappy occurrence as I considered what to do.

    What fixed THAT was to make sure that they had the correct data-position as fixed – for instance:

    That worked to fix the bug that your fix solved. Thank you! But arrugggghh with this web-wrapped-in-js-native-mobile sandwich stuff. The layers of fixes for simple UI things is reminding me of bad cross-browser compatibility days of long ago.

    Thank you Glen !!

  22. Got this from a jquery ghithub website

    Solution to flicker problem in jQuery mobile page transitions!
    Milestone: 1.4.0

    uGoMobi is assigned
    I’m developing a mobile web site using jQuery mobile framework. When I use page transitions (like slide), it causes a flicking. Especially in default browser in android phones, flicking is really bad.

    I deeply investigate the jquery-mobile.js to understand when this flickering happens. After spending many hours, I found which code part causes the problem: Enabling/Disabling zoom on just before page transition!

    in jQuery mobile 1.2.0 source codes (line 7211 to 7234):

    $.mobile.zoom = $.extend( {}, {
    enabled: !disabledInitially,
    locked: false,
    disable: function( lock ) {
    if ( !disabledInitially && !$.mobile.zoom.locked ) {
    meta.attr( “content”, disabledZoom );
    $.mobile.zoom.enabled = false;
    $.mobile.zoom.locked = lock || false;
    }
    },
    enable: function( unlock ) {
    if ( !disabledInitially && ( !$.mobile.zoom.locked || unlock === true ) ) {
    meta.attr( “content”, enabledZoom );
    $.mobile.zoom.enabled = true;
    $.mobile.zoom.locked = false;
    }
    },
    restore: function() {
    if ( !disabledInitially ) {
    meta.attr( “content”, initialContent );
    $.mobile.zoom.enabled = true;
    }
    }
    });

    I deleted the lines:

    meta.attr( “content”, disabledZoom );

    and

    meta.attr( “content”, enabledZoom );

    (lines 7216 and 7223)

    Then it worked smoothly without a problem! I don’t know if it causes another problem but the problem was changing max-zoom in page transition. In my tests, it worked correctly without any problem.

    I wanted to inform you to consider this problem while changing zoom.

Comments are closed.