Android 2.x: Page transitions broken when fixed toolbars used #3748

Closed
rbdcti opened this Issue Mar 6, 2012 · 31 comments

Projects

None yet

9 participants

@rbdcti
Contributor
rbdcti commented Mar 6, 2012

Man, I've been banging my head against the wall on this one thinking it was my code. This is an issue only with Android 2.x from what I can tell.

Go to http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html on an Android 2.x device (I've tried with a G1 running 2.2, as well as the 2.2 and 2.3.3 emulators). Click on any one of those tabs, the AJAX transition will go, but pageshow is never called, and you end up seeing a blank (white) content div. (If it works, clear your cache and load up the first page again...in my testing it worked at most 20% of the time, and failed the rest).

Removing the fixed directives from the header and footer fixes this 100%. Not 100% sure, but this bug may only happen when a navbar is in use in the fixed footer?

I'm working up against the absolute newest JQM master (as of 5 minutes ago), still an issue.

@johnbender
Contributor

@rbdrbd

Sorry that you spent so much energy on this one before reporting the issue :( I just ran it through my 2.3 evo 4g and it appears to work fine so I'll have to pester the folks with 2.2 devices. Thanks for reporting the issue!

@rbdcti
Contributor
rbdcti commented Mar 6, 2012

@johnbender: As a sanity check, I just retried on my hardware 2.2, and the 2.2 and 2.3.3 emulators using the following procedure:

Results:

  • Hardware 2.2: Failure (blank page)
  • 2.2 emulator: worked
  • 2.3.3 emulator: failure (blank page)

This would suggest that it's a global 2.x thing, and works some of the time (race condition perhaps...I noticed the event flow is different when it works vs when it doesn't, beyond pageshow not being called).

@johnbender
Contributor

@rbdrbd

We just tested on our 2.2 devices and we aren't seeing an issue, is there any chance you'd want to dive in an take a look? The only reason I ask is that it's hard to debug when we can't reproduce it :D

@rbdcti
Contributor
rbdcti commented Mar 6, 2012

@johnbender ...weird ....I posted a video of the problem happening at http://www.youtube.com/watch?v=97doa3nbYX4

In this video it fails on both (I'm running 2.3.3 and 2.2 emulators in it). Before I started this video I went back to www.google.com and cleared the browser cache on both emulators

@Wilto
Contributor
Wilto commented Mar 6, 2012

Just to be sure, I checked this out on the following:

  • 2.1 (HTC Aria): demoted to static toolbars and—predictably—working fine.
  • 2.2 (Motorola Droid): working
  • 2.3 (Samsung Nexus S): working

Like @johnbender said, it would be hugely helpful if you could try to track down the root cause of the issue. There’s so much variance from device to device with Android—even when running the same point release—that these kinds of things can be next to impossible to sort out.

@rbdcti
Contributor
rbdcti commented Mar 6, 2012

If we still can't reproduce it, then I'll head out to the Verizon/AT&T store this evening and try it on the devices over there (if they still even have any 2.x devices).

If someone can try and confirm on the stock 2.2 and/or 2.3.3 emulator that would be great too. I just closed all emulators, then opened 2.2 on my box (wiping user data), and tried again, same problem.

@rbdcti
Contributor
rbdcti commented Mar 6, 2012

So I went back to my site and tried. I have the following debugging code from @johnbender on another post that I modified a bit:

  $( document ).bind("pageinit pagebeforechange pagechange pagechangefailed pagebeforeshow pageshow pagebeforehide pagehide pageremove pageloadfailed", function( e ) {
      if(console.log)
        console.log( e.type + ": " + e.target.nodeName + " - " + ( e.target.id ? "#" + e.target.id : "<No ID>" ) );
  });

  if(console.log)
    console.log("REGISTERING BASE HANDLERS...");

Here's what I got for the first page shown, upon loading the site (this works fine all the time):

I/browser (  355): Console: REGISTERING BASE HANDLERS... http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:8
I/browser (  355): Console: [6/3/2012 13:44:8.387] Testing cookie support http://rbnbank.d01.apptend.com/static/scripts/jquery/jquery.jqlog.js:295
D/dalvikvm(  318): GC_EXPLICIT freed 138K, 54% free 2810K/6087K, external 1625K/2137K, paused 458ms
I/dalvikvm(  355): Jit: resizing JitTable from 1024 to 2048
I/browser (  355): Console: [6/3/2012 13:44:9.591] Adding CSRF cookie: null http://rbnbank.d01.apptend.com/static/scripts/jquery/jquery.jqlog.js:295
I/browser (  355): Console: pagebeforechange: BODY - <No ID> http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pageinit: DIV - #page_account_7ddffaf20a494b03978950281f9c6e9c http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pagebeforeshow: DIV - #page_account_7ddffaf20a494b03978950281f9c6e9c http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: [6/3/2012 13:44:11.932] Reporting page visit for path: '/_a/account/' http://rbnbank.d01.apptend.com/static/scripts/jquery/jquery.jqlog.js:295
I/browser (  355): Console: pageshow: DIV - #page_account_7ddffaf20a494b03978950281f9c6e9c http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pagechange: BODY - <No ID> http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4

Clicking on tab, getting blank page issue:

I/browser (  355): Console: pagebeforechange: BODY - <No ID> http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pageinit: DIV - #page_support_96dd8ff5a17047729a651dc03d18225c http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pagebeforechange: BODY - <No ID> http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pagebeforehide: DIV - #page_account_7ddffaf20a494b03978950281f9c6e9c http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pagebeforeshow: DIV - #page_support_96dd8ff5a17047729a651dc03d18225c http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4

I did the clear cache and retry procedure I detailed earlier a few more times and after 2 more tries I got the page to actually display when I clicked the tab. This is what the console produced:

I/browser (  355): Console: pagebeforechange: BODY - <No ID> http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pageinit: DIV - #page_support_f3fde1bd0af34702aa02cc7bec9e6566 http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pagebeforechange: BODY - <No ID> http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pagebeforehide: DIV - #page_account_d64a33dbc07e46c89ad78dd9aba122fe http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pagebeforeshow: DIV - #page_support_f3fde1bd0af34702aa02cc7bec9e6566 http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pagehide: DIV - #page_account_d64a33dbc07e46c89ad78dd9aba122fe http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: [6/3/2012 13:48:35.493] Reporting page visit for path: '/_a/_support/' http://rbnbank.d01.apptend.com/static/scripts/jquery/jquery.jqlog.js:295
I/browser (  355): Console: pageshow: DIV - #page_support_f3fde1bd0af34702aa02cc7bec9e6566 http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4
I/browser (  355): Console: pagechange: BODY - <No ID> http://rbnbank.d01.apptend.com/static/scripts/mobile_base.js:4

This isn't saying much, except that pagehide isn't being called on the old page for some reason (along with pageshow and pagechange after that). If you guys want me to run with any debugging code, just let me know.

@johnbender
Contributor

@rbdrbd

This is sort of a stab in the dark but this may be a load order issue. Do you have a fork/clone of the repo setup on your machine with apache and php by chance?

@rbdcti
Contributor
rbdcti commented Mar 6, 2012

I have a webserver running apache/php that I can checkout the repo to, if that's what you need. Just let me know what you want me to check out and do. :)

@rbdcti
Contributor
rbdcti commented Mar 6, 2012

BTW, my code (which I got the samples above) is running with the most recent commit from master as of this typing (022d8e5). Not sure if that matters.

@johnbender
Contributor

@rbdrbd

If you serve up a page at the root of the project just use "../js/" for the jquerymobile source. This is a guaranteed load order (it's concatenated by php) so if you can't reproduce the issue then we might have a lead.

@rbdcti
Contributor
rbdcti commented Mar 6, 2012

@johnbender

Just did a git pull and have the newest code running in the way you wanted at: http://web01.paramise.com/jqm/docs/toolbars/footer-persist-a.html

Tried about 10 times on both 2.2 and 2.3.3 emulators. The success rate is MUCH improved...up at about 70% now success rate (from about 20% or so). Not sure exactly what this means in regards to why it's not working 100% of the time, but there is a definite difference.

Robby

@johnbender
Contributor

@rbdrbd

I don't think that's the issue then. If it was it would stop all together.

@jsumners
jsumners commented Mar 7, 2012

@rbdrbd Does it happen with the test case at http://dl.dropbox.com/u/1038672/examples/jqm-1.1rc1-pageChange/index.html ? I am seeing the same thing in a PhoneGap application I'm developing in the iOS Simulator. But after creating this simplified version of my setup, the problem isn't occurring.

@rbdcti
Contributor
rbdcti commented Mar 8, 2012

@jsumners Yeah I tried your site about 8 times with both emulators here and it looks good. Not a single problem. Add a fixed footer and see if that causes it to break (that seems to be the case with me).

I did also go to the Verizon store yesterday and tried this with all of their Android devices (2.2, 2.3.3, 2.3.4, 3.2 I think, and ICS). This doesn't seem to be an issue on apps on any of the hardware devices they have there (non phonegap, at least). ...I may have seen it happen ONCE on an ICS device, but I can't say for sure.

If we can get someone to confirm or deny this is an issue on the stock Android 2.x emulators that would be great. Very odd...

@rbdcti
Contributor
rbdcti commented Mar 8, 2012

@jsumners Also....it was messing up on me if the header and (/or?) footer was fixed, i.e. using data-position="fixed" ..if I took those off both of them I didn't have any more issues.

@jsumners
jsumners commented Mar 8, 2012

I added a fixed footer to the "foo" page of my sample. It already had a fixed header.

@rbdcti
Contributor
rbdcti commented Mar 8, 2012

@jsummers The version I tried at least wasn't using a fixed header (I did a view source on http://dl.dropbox.com/u/1038672/examples/jqm-1.1rc1-pageChange/index.html and your header div looks like

instead of
)

@lanavelino

@rbdrbd works fine on 2.3.7 hardware using http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html as test

@jsumners
jsumners commented Mar 9, 2012

@rbdrbd The only page in the test that has fixed toolbars is the "foo" page that is reached via the "Click Me!" button.

@rbdcti
Contributor
rbdcti commented Mar 9, 2012

@lanavelino yeah, I've only been able to reproduce this on a single Android 2.2 hardware device (an old G1 all hacked and modded to hell, so I don't trust it). However this consistently also causes problems for me on the Android 2.2 emulators.

Has anyone been able to try the docs site (http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html) on the Android emulators to see if the issue can be reproduced?

If we can't get anyone who can reproduce this even on the emulators, I'm down with closing this ticket at least for now.

@jacob
jacob commented Mar 21, 2012

I can confirm this on a Samsung Galaxy running android 2.2. When viewing http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html the flicker effect is as follows: click to change tabs, the page you are on flickers once, the content changes to the new page, then the new page flickers once.

FWIW this device also flickers on page transition with a regular footer if the page is taller than the size of the screen. It will flicker with the fixed footer regardless of the height of the page.

@jacob
jacob commented Mar 21, 2012

FYI a workaround that seems to work great is to set the defaultPageTransition to none. If you can stomach the difference between fading and cutting this seems to be a good way to go. It appears to have solved all android flashing transition problems for me in one go. (using 1.1.0-rc.1)

@rbdcti
Contributor
rbdcti commented Mar 21, 2012

@jacob: In my case I was getting a white screen on android 2.x with the fixed footers. I haven't been able to reproduce it on any other devices besides my 2.2/2.3.3 emulators and an old G1 running 2.2.

However, WRT the flicker issue on Android, I am definitely seeing that like you described!

@steven-fernandez

I don't know if this helps but I get similar issues whenever I use: -webkit-backface-visibility: hidden; on a ui-page.

@jaspermdegroot
Member

@rbdrbd

Do you still see the issue when using latest code?

@steven-fernandez

Yes, I'm testing on 1.2.0-beta.1 and I am having problems with the Android Flicker so I decided to try out some possible fixes I found on the net ...one of them uses -webkit-backface-visibility: hidden; and this seems to make the page contents disappear just like what rbdrbd reported.

@jaspermdegroot
Member

@steven-fernandez

Please provide info about what version of Android you tested on and a test page. Thanks.

@jaspermdegroot
Member

I removed "1.1RC1" from the title of this ticket.

@jaspermdegroot
Member

@steven-fernandez

In the code snippet you provided (#4988) I also see overflow: hidden;. What happens if you just use .ui-page { -webkit-backface-visibility: hidden; }?
See the important note here http://jquerymobile.com/test/docs/pages/page-transitions.html. Do you see the same issue on your device if you test our page that has the implemented work around?

@steven-fernandez

The problem only happens if when I use data-position="fixed" otherwise I don't even need .ui-page { -webkit-backface-visibility: hidden; } ...

So, the transitions in my Android Galaxy s3 are really smooth unless I use data-position="fixed" , which just makes the transitions break.

@arschmitz arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Nov 1, 2012
@arschmitz arschmitz FixedToolbar: Added extension with browser specific workarounds Fixed:
…#3748 Android 2.x: Page transitions broken when fixed toolbars used


#4113 Header and footer change their position after keyboard popup - iOS
#4250 Persistent footer instability in v1.1 with long select lists in Android 2.3.3
#4259 Fixed toolbars change position when navigating between tabs.
#4337 Fixed header problem after scrolling content on iOS and Android
##4410 Footer navbar moves up when clicking on a textbox in an Android environment
948eeaa
@arschmitz arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Nov 8, 2012
@arschmitz arschmitz FixedToolbar: Added extension with browser specific workarounds Fixed: …
#3748 Android 2.x: Page transitions broken when fixed toolbars used
#4113 Header and footer change their position after keyboard popup - iOS
#4250 Persistent footer instability in v1.1 with long select lists in Android 2.3.3
#4337 Fixed header problem after scrolling content on iOS and Android
##4410 Footer navbar moves up when clicking on a textbox in an Android environment
d687da5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment