Move this topic
Page transitions are still "Blinky" on Android 2.2 & 2.3 (jQmobile A3)
in Developing jQuery Mobile
•
12 years ago
Update: It occurred to me to test out the jquerymobile docs and demos page (http://jquerymobile.com/demos/1.0a3/) in my Android and the emulator (default resolution) - and I can conclude that page transitions are still blinky in Android 2.2 and 2.3 - I spent time writing up the post below, so I'll let it stand so you can see what agony I've gone through (haha)
Edit: I also tried this with jquerymobile.com/test/ to see if you'd maybe already fixed this. But alas, no señor....
It still confuses the heck out of me that I didn't see this untill now however - My app was working just fine (page transition-wise) - and I am using a local copy if the jqmobile framework - so it's not like I'm using a CDN version that got updated or something...
--------------------------
I switched to A3 recently - and everything was working out beautifully. I'm well on my way building my app, and all is swell except for a few minor quirks. I'd been regularly testing with both Android 2.2 and iOS4 and up untill yesterday page transitions were smooth as silk.
A couple of days ago however, the Android phone I'm testing on suddenly exhibits the old (well known) blinky problem when doing page transitions (I think you eradicated that bug in A2, as far as I remember? https://github.com/jquery/jquery-mobile/issues/190 ) - Interestingly enough it's peachy perfect still on my iPhone
Anyway - I am perplexed as to why this is suddenly happening. I have been hacking away for a few days now trying to figure out what I've changed to trigger this sudden reversal into blinky foulness... But to no avail.
So, I'm hoping you righteous jqmobile gangstas out there might be helpful in pointing me in the right direction.
This is what I've seen/tried so far:
- Tested my webapp in the Android emulator, and there I see NO blinkyness in Android 2.1 but there is blinkyness in 2.3 - So, Android 2.2 (both emulator and real life phone, HTC Desire) and 2.3 are exhibiting this behavior
- Rolled back all my changes that I made (that I could remember - I really should have been using Git, but didn't - D'oh!) without finding the culprit
- Tried testing your demo pages just now... Oh wait... Blinkyness!!!
4
Replies(16)
The blink is caused when we scroll the page to a location so if you're transitioning between two short pages or if you haven't scrolled down before clicking, it will be perfectly smooth. On longer pages, you see a blink on some devices as it scrolls and renders the view. We've tried about half a dozen completely different approaches and still end up with a blink. We're not giving up, but it's tricky.
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
Leave a comment on toddparker's reply
Hi Todd,
Hmm - I'm not sure we are talking about the same thing here. I know the "problem" with the scroll where the page loads in, jumps down to the location where you were before.. so to speak. Which to me is expected behavior in a browser based environment.
The problem I am describing here is different: Try firing up the Android 2.2 or 2.3 emulator (standard resolution) - or even a physical device if you have it - go to http://jquerymobile.com/demos/1.0a3/ and then (without doing any scrolling!) click back and forth a bit on the first few menu items.
What I typically see is reasonable rendering on the slide from the index page to a subpage - but then when I click the back button I get the index page sliding in with a flicker of the subpage thrown in for kicks* n' giggles
And this only - I repeat only happens on Android 2.2 and 2.3 - Not 2.1 and not on iOS
BTW Todd: You are an awesome righteous dude - thanks for all your hard work with the community and getting this beast completed - and done right! :)
Leave a comment on kramericaindustries's reply
Gotcha. We're still actively working on smoothing out the transitions and have a few branches with alternate approaches. Hoping to make this a lot better for beta.
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
Leave a comment on toddparker's reply
Wussup Todd.
Oh ok - so you were aware of this? It just seemed to me like everybody thought transitions were peachy on both the major platforms - so I was surprised to see this happening with your demo pages (especially since my own app had been working just fine, and then suddenly broke - which is seriously confusing the heck outta me)
Anyway, nevermind that. So.... Should I file this as a bug in Git? Because I've looked around, and there is no mention of this anywhere - and in my mind having transitions be buggy on Android 2.2 and 2.3 is a pretty big deal.
I will be spending some time looking around for solutions - maybe try out some of the old jQtouch code and others and see what works best on those Android platforms. I'll also keep looking at my own code and see if I can't figure out how come things were working magically before (maybe I had some unicorn tears fall on my code, and then they dried up)
Thanks again - and let me know if I should file this in Git - I'd like bigger brains than mine working on this - haha
Leave a comment on kramericaindustries's reply
Feel free to create a test branch and see if you have any luck. jQTouch doesn't seem to scroll back to your position which is the root cause of a fair amount of blinkiness.
We're tracking this as a critical issue here:
And there are a few branches exploring alternate ideas already for you to check out.
_t
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
Leave a comment on toddparker's reply
Hi Todd,
The issue you link to is still not what I am talking about here. The issue is that the previous page contents blinks in and out of view on the Android. I'm not talking about scroll jumpyness here.
I am pretty confident this is reproducible for anybody who is willing to take a look, as it can be seen in the Android emulator and on your own docs/test pages. So I'll go ahead and open this as a bug/issue in git
Thanks for your feedback thus far, however!
Edit: I created the issue https://github.com/jquery/jquery-mobile/issues/1124
I am pretty confident this is reproducible for anybody who is willing to take a look, as it can be seen in the Android emulator and on your own docs/test pages
I'm also having this issue running the alpha3 demo in an android 2.2 physical device.
This also happens on my nexus s running Android 2.3
Leave a comment on kramericaindustries's reply
Todd: As you can see there are more people than me seeing this issue - and it is a real issue. I don't know how github works exactly - but it seems to me like someone from the team needs to look at my filed issue and bump it up / set a status on it so that it gets into the pipeline.
Any way that you could bump this, so that it definitely gets on your todolist?
Again, I might be asking for something that has already happened - in which case, feel free to call me a tosser. I look forward to a potential solution!
Leave a comment on kramericaindustries's reply
I too was experiencing this problem as well. The ajax links and ajax forms both seemed pretty buggy for my needs. Yes the transitions look amazing (when running this on chrome) but wasn't the look and feel i was trying for on android.
My temp work around for this issue was to disable ajaxForms and ajaxLinks. Then manually handle the forms via ajax myself. I have posted examples on this on a couple of threads. Also I disabled the ajax links to make regular links that are not loaded via ajax. For me, this works perfect. I get no jumpy issues, no problems with the history hash in the url and be able to handle my ajax forms manually and extend certain functions from jqm to give it a nice look and feel.
I plan on running things this way until everything is under control. I love jqm and it has a lot of potential and once it's officially released I will use it in my production environment.
Keep up the good work guys.
Leave a comment on dayv2005's reply
dayv2005: You aren't exactly helping to keep a clear picture here. This problem has nothing to do with ajaxForms or links or ajax in general. Heck you might have seen it, and then it magically cleared up (like I saw nothing at first, and then it suddenly appeared for me) - but that's not the issue.
This issue has to do with bare-bones, stock, animation between pages on Android 2.2 and 2.3
I am frankly a bit surprised at how little attention this is getting. The problem is clearly visible with jqmobile's own test pages on Android 2.2 and 2.3 and it will probably be present in Android 3.0 as well
As Android is one of the larger platforms out there - and will only get bigger in the future - one would think that something as basic as having page animations working properly would be numero uno on the todolist for the jqmobile team. Instead it seems they are largely content with the current status quo which is "kind of almost working on all platforms"
This makes me unhappy, Or maybe I'm just venting a bit as it is annoying that the issue seems to be misunderstood by Tood, and that my Git issue/report has received no attention. Oh well... Maybe it's just time to scrap 90% of my work and start looking at Titanium
Leave a comment on kramericaindustries's reply
I also encountered some special "blinkiness" on android and inserted the following few css lines after the jquery mobile-css:
- .ui-mobile-viewport > div
{
display: none;
}
.ui-mobile-viewport > div.ui-page-active
{
display: block;
}
Leave a comment on indy.essl's reply
@kramericaindustrie Improving the overall performance of the page transitions is a very important thing for the team. That is precisely why it's listed as one of our top 6 project priorities in the tracker and we've spent a lot of time trying multiple approaches to make this work better. There are 2-3 alternate branches with completely different transition approaches that we were working on for A3, none of which panned out.
We have a few more ideas that we're going to be trying soon, but please realize that this project has only 3 regular developers, each with days jobs so this is a part-time, volunteer effort. Complaining that we're not working fast enough for you is neither helpful or constructive. This is an open-source, alpha framework and this is an incredibly complex issue to solve. If it was a quick fix, it would have been made already.
Right now, the team is working on re-writing the tap/click event system and implementing a namespace across all our data attributes. Both of these are major efforts and will requie that developers adjust their code so we want to finish these as fasst as possible and push out the code to give people time to adapt. Transition fixes won't touch the markup or API so we can slot these in for Beta with no impact so our game plan is to focus on this after we finish these other issues.
I've revised the title and description of #455 to better match what's going on because I want a single place to track and discuss transitions holistically. We've been informally using this ticket for a while and I want to keep the conversation channeled to one place. I added a link to your issue and this thread as a comment at the end of 455 and will be closing 1124 so we can have a single conversation around this topic.
Here is what I wrote as the new intro on #455:
As of A3, page transitions are still not smooth on many platforms so this issue is being used to track our progress on improving the situation. This is a multi-faceted issue because we need a smooth transition system that works across all our target platforms and maintains all the normal "web" behavior such as returning a user back to their original scroll position when re-visiting page.
This issue originally started out regarding the address bar on iOS and flashes on Android but has expanded to discuss our progress on the larger re-write that Jesse, Kin and Scott have been working on so I've added this intro and revised the title accordingly. All transition-related issues will be closed and push back into this issue so we can track them together. A solution to the symptoms seen will require a deep re-factor and re-approach so it makes sense to look at this issue holistically and any fix for one platform needs to be evaluated against it's impact on another.
I hope this answer is helpful in understanding how we're going to approach this. If you want to jump in and work onn a new branch that offers a possible solution, that would be welcome.
Cheers,
Todd
Todd
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
Leave a comment on toddparker's reply
Hi Todd,
Yeah sorry about that - I was having a bad day, and probably spinning the rhetoric a bit in an effort to goad out a clear answer. Thank you for your thorough and clear answer Todd, and for your attention in this matter. After having explained your gameplan, I must say that you seem to be going about things in the right way.
I really do love jquerymobile and the effort you guys are putting into it is tremendous. I'm a great vocalist for this particular approach when it comes to mobile development - and I believe that in time it might become the way we will most efficiently merge the online web-experience with the truly mobile one.
With that said, then I am currently in a position where I have spent a great deal of time working with jquerymobile since its very beginnings - and despite of being thoroughly aware of the fact that it is a work in progress - am probably just getting a bit impatient as I am rapidly nearing feature completion on the app I've been working on for so long. It is a very frustrating situation then, when almost all the myriad of pieces in the puzzle are fitting together except for a few UI-experience related issues - which in my mind should be key in guaranteeing widespread acceptance of jqmobile as a rugged, reliable and expedious way of creating a good mobile experience. But you already know that. A few that come to mind, most of which it seems you have already solved or are working hard at fixing, are (besides transitions of course) tap speeds/responsiveness, scrolling, rugged/working selects, bug-free history/navigation and better interaction with form elements. You know that perfectly well as well.
Lately having studied Titanium in greater detail - I see that they have made great strides and come a long way since I looked at them last sometime before jqmobile was born as a project. And many, if not all of these basic UI features are licked by their (unfair! haha) advantage of compiling to native code. Despite having its foundations in javascript however, a port to this platform of my project would require almost a complete rewrite - which, mildly put, was a bit disheartening to me.
With that said, one cannot of course equate Titanium with jquerymobile and with that in mind the immediate focus of the jqmobile team should be to provide an acceptable web experience. However, down the road the potential of doing "faux-native" interfaces in HTML5 and using a javascript-to-native bridge like e.g. Phonegap provides much greater flexibility, portability and ultimately a fusion with the web experience.
So I am sticking with jqmobile to the (hopefully glorious) v1.0 - and I will do my best to help out and contribute as much as I can. My focus will (by necessity) be to fulfill my own selfish needs to complete my app and give customers the experience they deserve - so I will of course try to be as active as I can in the community in finding a solution to the remaining UI problems I am having in jqmobile (especially transitions)
Thank you yet again Todd, and I hope I can help solve some of these problems in the coming months. May I come with a suggestion: Use the blog some more! If the team were to come out with more regular status updates (laying out the immediate development focus and plans like you did in your reply) - I think a lot of grumpy old men like me would turn quite mellow and more patient with you guys :)
Leave a comment on kramericaindustries's reply
Thanks for the follow up and yes, we'll try to be better about blogging about what's going on. We've recently been using out jquerymobile twitter account to do more of this, but blog posts are good too!
_t
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
Leave a comment on toddparker's reply
Hi, guys
I have same issue here (Android 2.2 physical device).
This may shed some light on a problem: i noticed that when slide was caused by touch event for example pressing some button in the application the screen is blinking (when slide is finished old page appears for a fraction of second and then disapear again). But when if i use hardware back button page slides very smoothly and there is no blinking at all.
Leave a comment on maximchick's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to kramericaindustries's question
{"z22853242":[14737000003662684],"z4759776":[14737000002017382,14737000002017403,14737000002019299,14737000002032081,14737000002033149,14737000002041003,14737000002038412],"z5449911":[14737000002031180],"z524188":[14737000002031910],"z600308":[14737000002018467,14737000002020041,14737000002020329,14737000002041208,14737000002038821],"z5363242":[14737000002033595],"z4804464":[14737000002041005]}