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

[rbdcti]

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]

@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]

@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:

• Take the browser back to www.google.com
• Clear the browser cache
• Hit the http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html page
• Touch any one of the other tabs

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]

@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]

@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]

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]

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]

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]

@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]

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]

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]

@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]

@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]

@rbdrbd

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

[jsumners]

@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]

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