Jul
14
2011
14
2011
Eliminating annoying flicker transitions with jQuery Mobile on Android
An article by Glen
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!
Did you enjoy this article? Share it!
About the Author: Glen Smith
34 Comments + Add Comment
Leave a comment
Glen Smith
Archives
- April 2012
- March 2012
- January 2012
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
- April 2011
- March 2011
- January 2011
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006
- February 2006
- January 2006
- December 2005
- November 2005
- October 2005
- September 2005
- August 2005
- July 2005
- June 2005
- May 2005
- April 2005
- March 2005
- February 2005
- January 2005
- December 2004
- November 2004
- October 2004
- September 2004
- August 2004
- July 2004
- June 2004
- May 2004
- March 2004
- February 2004
- January 2004
- December 2003
- November 2003
- October 2003
- September 2003
Thank you sir!
Amazing! A week of frustration with my android/phonegap web app solved! Thanks!
Cheers Glen!
I had the same issue on a phonegap / jquerymobile / iOS project. Fixed the damn issue.
Hm, where exactly did you put that…?
@CW, you need to put it in a css file that loads after the jquerymobile.css file.
OK, thx.
Then it just doesn’t work for me…
Whoa.. Seriously just saved my project!! Now if I can only stop the flicker of the fixed position nav bar…
Thanks!
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.
We experienced this problem as well. It made our forms generally unusable.
Transition flickers were comparatively minor in effect
Thanks … its a life saver
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.
works like a charm! Thanks a lot the bug was driving me crazy.
Thnx! Works like a charm =)
Beautiful sir! Give that man a cookie!
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
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.
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.
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.
Thanks a million for sharing it!!!
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…
Great! Fixed my iOS5 flickering headache
Fixed a few problems, but still some flickering though. But still thx
Thank you sir.You are genious.Great job, was thinking that my function was getting called twice, turned out to be a css issue.
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.
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!
Thanks a lot!
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.
Awesome, this fixed the same issue using a homescreen webapp built with jQuery Mobile.
Thanks
Awesome ! with your help I fixed the issue for blackberry app ! thanks. !
It works for iOS too.
You saved my day. Thanks a lot.
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.
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!!
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