logo

Eliminating annoying flicker transitions with jQuery Mobile on Android

logo

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!

49 Responses to “Eliminating annoying flicker transitions with jQuery Mobile on Android”

  1. poobear says:

    Amazing! A week of frustration with my android/phonegap web app solved! Thanks!

  2. Jos says:

    Cheers Glen!

    I had the same issue on a phonegap / jquerymobile / iOS project. Fixed the damn issue.

  3. CW says:

    Hm, where exactly did you put that…?

  4. John says:

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

    Thanks!

  5. eehan says:

    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.

  6. Girish says:

    Thanks … its a life saver

  7. Kinetic One says:

    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.

  8. yoshi says:

    works like a charm! Thanks a lot the bug was driving me crazy.

  9. Thnx! Works like a charm =)

  10. Anthony Gill says:

    Beautiful sir! Give that man a cookie!

  11. Hardik Thakkar says:

    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

  12. Greg says:

    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.

  13. Gopinath says:

    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.

  14. Marc says:

    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

    • Karaffeltut says:

      · 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.

  15. Supriya says:

    Thanks a million for sharing it!!!

  16. alejandro says:

    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…

  17. Michael says:

    Great! Fixed my iOS5 flickering headache

  18. Piejero says:

    Fixed a few problems, but still some flickering though. But still thx :D

  19. Parag says:

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

  20. Roeland de Jong says:

    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.

  21. Brett Alton says:

    I’m experiencing that flicker with an iPad 2/iOS 5.1, jQuery Mobile 1.1.0-RC1, PhoneGap 1.4 and this fixed it. Thank you!

  22. Nishant Parmar says:

    Thanks a lot!

  23. Lumit says:

    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.

  24. Quoc Huy says:

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

    Thanks

  25. Danny says:

    Awesome ! with your help I fixed the issue for blackberry app ! thanks. !

  26. Gabriel Mendez says:

    It works for iOS too.
    You saved my day. Thanks a lot.

  27. ANurag says:

    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.

  28. empollica says:

    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!!

  29. Pbifaro says:

    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

  30. appstar says:

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

  31. prakrati sharma says:

    i placed this code in my css file bt its not working

  32. Baxeth says:

    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

    • HYD says:

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

  33. Vikrant says:

    Awesome work ! Thanks a lot. Its working in blackberry.

  34. spencer says:

    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
    }

  35. Smitha says:

    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.

  36. Thank you. This “simple” problem was distroying my application and my mind.
    cheers.

  37. Johnny says:

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

    cheers

  38. monica says:

    Hi everyobe, Im trying to do this but it doest work…
    Can someone help me???? thanks…

  39. Brent says:

    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 !!

  40. Damilola says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

logo
logo
Powered by WordPress | Designed by Elegant Themes