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

rbdcti · 2012-03-06T18:01:52Z

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 · 2012-03-06T18:10:07Z

@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 · 2012-03-06T18:16:39Z

@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 · 2012-03-06T18:25:25Z

@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 · 2012-03-06T18:29:32Z

@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 · 2012-03-06T18:30:27Z

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 · 2012-03-06T18:37:50Z

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 · 2012-03-06T18:53:53Z

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 · 2012-03-06T19:14:16Z

@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 · 2012-03-06T19:15:52Z

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 · 2012-03-06T19:17:45Z

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 · 2012-03-06T19:39:08Z

@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 · 2012-03-06T20:10:55Z

@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 · 2012-03-06T22:50:45Z

@rbdrbd

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

jsumners · 2012-03-07T20:35:22Z

@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 · 2012-03-08T15:14:56Z

@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 · 2012-03-08T15:16:46Z

@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 · 2012-03-08T15:39:49Z

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

rbdcti · 2012-03-08T16:00:58Z

@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 · 2012-03-08T16:24:41Z

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

jsumners · 2012-03-09T01:55:07Z

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

rbdcti · 2012-03-09T17:17:36Z

@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 · 2012-03-21T14:44:07Z

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 · 2012-03-21T15:04:19Z

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 · 2012-03-21T15:10:40Z

@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 · 2012-09-13T09:30:07Z

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

jaspermdegroot · 2012-09-13T10:06:43Z

@rbdrbd

Do you still see the issue when using latest code?

steven-fernandez · 2012-09-13T10:23:28Z

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 · 2012-09-13T10:31:33Z

@steven-fernandez

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

jaspermdegroot · 2012-09-13T10:32:32Z

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

jaspermdegroot · 2012-09-13T10:46:16Z

@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 · 2012-09-13T11:55:32Z

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.

…jquery-archive#3748 Android 2.x: Page transitions broken when fixed toolbars used jquery-archive#4113 Header and footer change their position after keyboard popup - iOS jquery-archive#4250 Persistent footer instability in v1.1 with long select lists in Android 2.3.3 jquery-archive#4259 Fixed toolbars change position when navigating between tabs. jquery-archive#4337 Fixed header problem after scrolling content on iOS and Android #jquery-archive#4410 Footer navbar moves up when clicking on a textbox in an Android environment

jquery-archive#3748 Android 2.x: Page transitions broken when fixed toolbars used jquery-archive#4113 Header and footer change their position after keyboard popup - iOS jquery-archive#4250 Persistent footer instability in v1.1 with long select lists in Android 2.3.3 jquery-archive#4337 Fixed header problem after scrolling content on iOS and Android #jquery-archive#4410 Footer navbar moves up when clicking on a textbox in an Android environment

jaspermdegroot mentioned this issue Sep 13, 2012

Page Transitions screen flickers on Android #4988

Closed

arschmitz mentioned this issue Nov 8, 2012

fixedToolbars: Created extension for browser specific workaround #5260

Merged

gabrielschulhof closed this as completed Nov 8, 2012

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

rbdcti commented Mar 6, 2012

johnbender commented Mar 6, 2012

rbdcti commented Mar 6, 2012

johnbender commented Mar 6, 2012

rbdcti commented Mar 6, 2012

Wilto commented Mar 6, 2012

rbdcti commented Mar 6, 2012

rbdcti commented Mar 6, 2012

johnbender commented Mar 6, 2012

rbdcti commented Mar 6, 2012

rbdcti commented Mar 6, 2012

johnbender commented Mar 6, 2012

rbdcti commented Mar 6, 2012

johnbender commented Mar 6, 2012

jsumners commented Mar 7, 2012

rbdcti commented Mar 8, 2012

rbdcti commented Mar 8, 2012

jsumners commented Mar 8, 2012

rbdcti commented Mar 8, 2012

lanavelino commented Mar 8, 2012

jsumners commented Mar 9, 2012

rbdcti commented Mar 9, 2012

jacob commented Mar 21, 2012

jacob commented Mar 21, 2012

rbdcti commented Mar 21, 2012

steven-fernandez commented Sep 13, 2012

jaspermdegroot commented Sep 13, 2012

steven-fernandez commented Sep 13, 2012

jaspermdegroot commented Sep 13, 2012

jaspermdegroot commented Sep 13, 2012

jaspermdegroot commented Sep 13, 2012

steven-fernandez commented Sep 13, 2012

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

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

Comments

rbdcti commented Mar 6, 2012

johnbender commented Mar 6, 2012

rbdcti commented Mar 6, 2012

johnbender commented Mar 6, 2012

rbdcti commented Mar 6, 2012

Wilto commented Mar 6, 2012

rbdcti commented Mar 6, 2012

rbdcti commented Mar 6, 2012

johnbender commented Mar 6, 2012

rbdcti commented Mar 6, 2012

rbdcti commented Mar 6, 2012

johnbender commented Mar 6, 2012

rbdcti commented Mar 6, 2012

johnbender commented Mar 6, 2012

jsumners commented Mar 7, 2012

rbdcti commented Mar 8, 2012

rbdcti commented Mar 8, 2012

jsumners commented Mar 8, 2012

rbdcti commented Mar 8, 2012

lanavelino commented Mar 8, 2012

jsumners commented Mar 9, 2012

rbdcti commented Mar 9, 2012

jacob commented Mar 21, 2012

jacob commented Mar 21, 2012

rbdcti commented Mar 21, 2012

steven-fernandez commented Sep 13, 2012

jaspermdegroot commented Sep 13, 2012

steven-fernandez commented Sep 13, 2012

jaspermdegroot commented Sep 13, 2012

jaspermdegroot commented Sep 13, 2012

jaspermdegroot commented Sep 13, 2012

steven-fernandez commented Sep 13, 2012