Fixed headers and footers scroll with the document on Android

[jblas]

On some Android browsers, the header/footer scroll with the document, but reposition themselves correctly after the scroll is finished. This is likely due to the fact that the browser is scrolling a snapshot of the layout viewport before it has rendered the results of the header/footer hide() call.

For iOS I forced the rendering results of the hiding and showing of headers/footers into the same rendering pipeline as the scroll by using a dummy translate3d property.we need to find the equivalent of this for the Android platform.

[gabrielgrant]

FWIW, I can confirm this is quite problematic on my Xperia X10 running 1.6

@jblas, are you actively working on this, or should I see if I can take a crack at it? Either way, I'm happy to test fixes, if needed.

[jblas]

@gabrielgrant

I'm currently working on some other issues at the moment. We're always happy to get help!

[gabrielgrant]

Hmmm... the only reference to translate3d i see is in experiments/scrollview/jquery.mobile.scrollview.js (line: 614 in setElementTransform). Looking in js/jquery.mobile.fixHeaderFooter.js, I don't see too much magic (other than the ShowTimer stuff, but that seems pretty straightforward). I was under the impression that native scrolling was being used at the moment. Is that not the case? Is scrollview where the problem is? Any pointers for where i should be starting to look would be greatly appreciated. (as an aside, are there docs anywhere that could help answer this type of question? i haven't come across any -- not that I'd expect them at such an early stage of development)

Thanks!

[toddparker]

This seems like a duplicate to #58 so I'm closing. I'll add a link to this from #58 for reference.

[gabrielgrant]

As I mentioned on #58, this ticket was created to track a specific sub-issue of #58 which has yet to be resolved, so it should probably be reopened.

[radhoo]

To create an user interface with a Header, a Footer, and a central, scrollable area, you can use the RelativeLayout like in this sample: http://www.pocketmagic.net/?p=1764

[ghost]

I confirm this is an issue on my Incredible Android

[scottjehl]

We dropped a few commits in the last day or two that made this pretty solid on iOS. I just tested Android 2.2 and things are looking good there too so I'm going to close this but please test alpha 4 and let us know if you still find issues!

[ghost]

This is still an issue with Alpha 4 on my Incredible Droid

[jefflembeck]

Have tested on Android 2.1, 2.2, and iOS, and the two latter look good, but Android 2.1 is still packing the same issues.

[gabrielgrant]

Android 1.6 is (unsurprisingly) still broken too.

[fletom]

Am I to understand that data-position="fixed" on headers and footers should work properly now? Without disappearing and reappearing whenever the user scrolls? Because I'm using 1.0a4.1 on an iPhone 4.3.x and things seem just as bad as always.

[toddparker]

The fixed headers and footer should work quite a bit better now than in 4.1 but they are far from perfect on some platforms and conditions. Some browsers freeze rendering and events during parts of the scrolling process so they can sometimes scroll with the page. There is a ticket to implement position:fixed css for iOS 5, PlayBook and Android 2.2 so these will get a perfect experience natively and we'll use this dynamic re-positioning technique for browsers that don't yet support this property so it will get better soon for most of the popular platforms.

[cburgdorf]

This fixed bottom bar seems to behave correct on my android 2.3 device. Can't we do it like that? http://doctyper.com/#/post/archives/200808/fixed-positioning-on-mobile-safari/

[mathiasconradt]

The fixed footer still doesn't work well, both on Android 2.3.6 as well as iOS 4: when I use it on the same page where I use collapsibles (http://jquerymobile.com/test/docs/content/content-collapsible.html), which are larger than the screen height. When I expand a previously closed collapsible (by touching it), and it's content is larger than the screen height, the footer is gone and doesn't get invisible - until I touch the screen again somewhere; only at that point the footer gets readjusted. (1.0RC1 code). Another issue is when I collapse a collapsible again, then sometimes the footer stays in the middle of the screen instead of the bottom. Here's a screenshot: http://imageshack.us/photo/my-images/38/footerbug.png/

[garris]

Androd 2.3.3 & 2.3.4: header data-position="fixed" works reliably. Android 2.3.5 & 2.3.6: header data-position="fixed" does not work, it scrolls with document.

/bump

[toddparker]

We don't have a device in our lab running 2.3.5 and 2.3.6 so we can't confirm this issue @garris but this seems like a possible regression on Android's browser. Can you try to create a simplified test page w/o any scripting to confirm that Android. 2.3.5 supports position:fixed (you need to disable user zooming via the viewport meta tag to enable this on Android).

[garris]

Ok, The results are the same for both using CSS position:fixed and JQM data-position="fixed"...

• android 2.3.3 good
• android 2.3.4 good
• android 2.3.5 fail
• android 3.3.6 device not available today but failed yesterday with JQM data-position="fixed"

tests used...

http://www.redcontraption.com/jqm/cssPropertyFixed.html <----- CSS position:fixed http://www.redcontraption.com/jqm/headerFixed.html <------ JQM data-position="fixed"

[toddparker]

So this means that Android 2.3.5+ shipped with a completely broken position:fixed implementation? Crazy.

Mind creating a new issue over on this generic device bug tracker issue along with your test page and results so others can share the joy: https://github.com/scottjehl/Device-Bugs

If you have time to see if this is already logged with Android, might be a good idea.

_t

[dcarrith]

I'm running 2.3.7 (Slayher's CM7.1.1 build for the Thunderbolt) and the fixed headers and footers function as they should. They do not scroll with the document.

[toddparker]

So maybe this was a relatively small regression for a release or two that Google has fixed. If we can get some more sample data from folks, we'd appreciate it.

[dcarrith]

I just tested on my wife's Samsung Droid Charge (Android v2.3.6) and the headers and footers scroll with the document.

[scottjehl]

I guess this is why my Samsung Galaxy Mini has broken fixies too - 2.3.6.

I can change the UA match up to exclude 2.3.5 and 2.3.6 if it's clear that's the trouble set.

On Apr 26, 2012, at 4:51 AM, Dave wrote:

I just tested on my wife's Samsung Droid Charge (Android v2.3.6) and the headers and footers scroll with the document.

---

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/860#issuecomment-5346135

[toddparker]

Seems like these versions just fallback to static anyway so do we need to do anything other than tell people Google broke their browser?

On Apr 25, 2012, at 9:57 PM, Scott Jehl wrote:

I guess this is why my Samsung Galaxy Mini has broken fixies too - 2.3.6.

I can change the UA match up to exclude 2.3.5 and 2.3.6 if it's clear that's the trouble set.

On Apr 26, 2012, at 4:51 AM, Dave wrote:

I just tested on my wife's Samsung Droid Charge (Android v2.3.6) and the headers and footers scroll with the document.

---

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/860#issuecomment-5346135

---

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/860#issuecomment-5347941

[scottjehl]

Well, I can at least change the UA opt-out, right?

Beyond that, a Device Bugs post would be good, it's just that the scope of position: fixed is a lot broader than a single device bug - not sure how to file it.

I notified Brad Frost on Twitter too

On Apr 26, 2012, at 8:10 AM, Todd Parker wrote:

Seems like these versions just fallback to static anyway so do we need to do anything other than tell people Google broke their browser?

On Apr 25, 2012, at 9:57 PM, Scott Jehl wrote:

I guess this is why my Samsung Galaxy Mini has broken fixies too - 2.3.6.

I can change the UA match up to exclude 2.3.5 and 2.3.6 if it's clear that's the trouble set.

On Apr 26, 2012, at 4:51 AM, Dave wrote:

I just tested on my wife's Samsung Droid Charge (Android v2.3.6) and the headers and footers scroll with the document.

---

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/860#issuecomment-5346135

---

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/860#issuecomment-5347941

---

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/860#issuecomment-5348415

[scottjehl]

I think it may be that meta viewport user-scaling can't be disabled in those versions, which is a requirement in Android for fixed positioning. Can anyone confirm that?

I've made a fix that needs confirmation on these platforms. Please test the "android235and236fixed" branch.

It should be here within the hour as well: http://jquerymobile.com/branches/android235and236fixed

On Apr 26, 2012, at 8:10 AM, Todd Parker wrote:

Seems like these versions just fallback to static anyway so do we need to do anything other than tell people Google broke their browser?

On Apr 25, 2012, at 9:57 PM, Scott Jehl wrote:

I guess this is why my Samsung Galaxy Mini has broken fixies too - 2.3.6.

I can change the UA match up to exclude 2.3.5 and 2.3.6 if it's clear that's the trouble set.

On Apr 26, 2012, at 4:51 AM, Dave wrote:

I just tested on my wife's Samsung Droid Charge (Android v2.3.6) and the headers and footers scroll with the document.

---

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/860#issuecomment-5346135

---

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/860#issuecomment-5347941

---

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/860#issuecomment-5348415

[garris]

This is great. I will test tomorrow first thing!

[jesperveldhuizen]

I have tried Garris his links on my HTC Desire HD with Android 2.3.5 and the fixed header work without any problems.

[jesperveldhuizen]

Just tries Scott his branch on the same phone and I confirm that the fixed header and footer bars work. But the header text (Fixed toolbars) shakes a bit (1px up and down).

[dcarrith]

I just tried android235and236fixed branch on my wife's phone (Android 2.3.6) but unfortunately it doesn't seem to have fixed it. The fixed position headers and footers still scroll with document on stock browser. I also tested Firefox and the same is true. However, I did notice that in Dolphin HD the fixed position works both in that android235and236 branch and in the official docs for 1.1.0.

[garris]

My results are the same as @dcarrith on android 2.3.5 & 2.3.6.

Using this page... http://jquerymobile.com/branches/android235and236fixed/docs/toolbars/bars-fixed.html

The header & footer scroll with the document. When the document stops scrolling, the header & footer reposition back to the proper top & bottom positions respectively.

(When tapToggled the headers & footers scroll behave as expected)

[jesperveldhuizen]

Don't know what is going wrong, but fixed header en footer toolbars are working fine on my HTC Desire HD with 2.3.5 using the default browser. I'm using the page above...

Please see this video: http://www.youtube.com/watch?v=t7ph0Qs3RG8

[dcarrith]

I just installed my phonegap app on my wife's phone (Android v2.3.6) and fixed position in JQM v1.1 works! So, it seems it's not an issue with default webview in v2.3.6, but rather, just the stock browser (and Firefox).

[garris]

@baansport I'll see your video and raise you a screenshot of the version number... ;)

data-position="fixed" still buggy on 2.3.5.

http://redcontraption.com/jqm/fixies1.MOV http://redcontraption.com/jqm/235.JPG

[jesperveldhuizen]

See the screenshot:

http://desmond.imageshack.us/Himg534/scaled.php?server=534&filename=20120426214757.jpg&res=landing

[toddparker]

@garris - thanks for the video. Sort of looks like the 1.0-style fixed toolbars. We'll have to wait and see if Google fixes this regression. If they don't we're faced with either having the toolbar scroll, then re-position or exclude these versions from fixed. My opinion is that since this "broken" behavior is similar to BB6's behavior or even our own 1.0 dynamic re-positioning script, this is probably not too bad in it's current form. Unfortunately, we can't fix Android's broken CSS rendering on our end.

I'd rather have this be a new issue since the original issue is about the 1.0-style toolbars and this is related to 1.1 CSS regressions on Android.

[garris]

@toddparker Thanks for the consideration. So, earlier android is working great and things seem to go south around 2.3.5. Maybe at some point during 2.3.6 google realized the problem and did a patch fix? (on our 2.3.6 :fixed is broken but @baansport's seems to be working). In any case, I would suggest JQM fall back to inline scroll for those versions. The delayed scroll+reposition makes JQM look a bit clunky (even if it is google's regression) /.02

I will post a new issue for tracking. Thanks again.

[garris]

New issue created here... https://github.com/jquery/jquery-mobile/issues/4281

[Bolas]

hey, I was having this problem with my android 2.3.5

I fixed it by replacing meta name="viewport" content="width=device-width, initial-scale=1" />

with meta name = "viewport" content = "user-scalable=no,width=device-width" />

in the header of the html

and by adding a new class to the footers along with data-role='footer' .footer { position: fixed; z-index: 10; bottom: 0; width: 100%; }

and guess what? it worked, the footer stopped dragging with the page :D Hope it helps any of you