Fixed Header and Footer 1.1 issue

[webdpro]

I have been using the new fixed headers and footers from the nightlys and things have been working well but I have noticed a few small issues

1. with fixed header and footers if a list scrolls under the header and in the header there is a button, when selecting the button it will click on the link under the header. This only seems to happen when I test on the phone or tablet (HTC G2 and Kindal Fire)

2. I have noticed that again if I have a list view and scroll the list view down and touch the header (any part of it) it will flash and then disappear (repositions itself to the top)

3. when scrolling (this is only on my phone) I am able to see the background content under the header, oddly enough this only happens on my phone and I think I have seen someone else mention this before

update: if you view the current site http://jquerymobile.com/test/docs/toolbars/bars-fixed.html using a phone or tablet the same issues happen. It seems to be more of a problem in landscape then in portrait mode. Also I started to notice this really when I did the primary and secondary content views again only seems to happen with touch not in browser. But I have noticed in firefox that if I double click in the content the footer goes away(not sure if that is by design though)

[toddparker]

@webdpro - Mind re-testing with the latest build? If issues persist, please help us by creating a test page or pointing to a docs that that illustrates each issue.

[webdpro]

Hi Todd. The button clicks under the nav seem to be gone but the flashing still happens (same link as above) I did find though can turn this off in the JS, I think you have some code that a tap or click inside the screen itself will cause the bars to hide. Not sure if this is what should be expected, I would think fix would be fixed right?

I just checked on my phone and I can still see the content scrolling under the header, just like a 1 px gap but you can see the content scrolling under it, like before this only happens on the phone. So ...

1 works now, 2- you just need to turn off the hiding of navigation in the JS, and 3) still seems to be a problem.

This is all using the same link from above ( I'm assuming that is using the dailies)

[toddparker]

@webdpro - Thanks for responding. Re #2, we have this option on by default because the fixed toolbars can really be a usability issue on smaller mobile screens but it's your choice to turn off the toggle.

The single line seems to pop up sometimes. What iPhone version and iOS version?

[webdpro]

I'm using Android 2.3 on my HTC-G2 and I see it on that device all the time, but on the kindal fire I don't see it at all. Give me a min because I can test it on ipod Touch OS 5 and also on iphone 3g.

[webdpro]

Does not seem to be an issue on the Ipod / iphone for me but somthing new I see is that the tool bars seems to be stuttering when I scroll, like they want to move but are hanging on andjumping a little when scrolling

[scottjehl]

Trying to weed my way through this one.

What issues if any are still lingering here?

@Wilto - did that 1px bottom shift have any effect on this gap mentioned above? Not sure if that workaround was added to address this, or perhaps it unintentionally ended up causing this...?

[Wilto]

@scottjehl Yeah, the bottom: -1px; padding-bottom: 1px made the stutter less glaring in browsers that suffer from it anyway—the footer would still jump around 1px, but you wouldn’t get the visible gap at the bottom. iOS seemed okay though, as far as my testing went. I can investigate today.

[jcostanza]

@scottjehl I see the background content above the header in a 1 or 2 pixel gap as well on Android 2.3.3. Does not happen on any of my iOS devices.

[jcostanza]

@webdpro & @toddparker I am still experiencing problems with issue 1) in the 1st post on Android devices version 2.2 & 2.3.3. Does not happen on iOS 5. Here is a jsFiddle example to recreate the problem.

http://jsfiddle.net/kKXHj/

[scottjehl]

Taking another look at this one today.

[scottjehl]

Hmm. I tried reproducing this using our latest code in 3 different Android 2.3 emulator resolutions, and all of those rendered fine (no gaps between the toolbars and the edges). My Galaxy Mini device running 2.3 also aligns them correctly.

@toddparker @Wilto - are you seeing gaps in your 2.2 or 2.3 devices on latest?

[webdpro]

@scottjehl What I have seen personally is that on emulators it runs fine but on my phone it has the gap so on my HTC g2 I see the gap but on my kindal fire I don't see the gap nor do I see it on my ipod touch.

my phone and fire are running 2.3

[Wilto]

HTCs do tend to be a little on the “quirky” side even when running the same version of the OS. I just checked this out on our HTC Incredible running 2.3, and I am seeing what appears to be a 1px gap between the header and the header’s top border (which is bizarre). I’ll have a fix in for this shortly.

[scottjehl]

maybe these are different versions of 2.3.x

On Mar 20, 2012, at 9:14 PM, Michael wrote:

@scottjehl What I have seen personally is that on emulators it runs fine but on my phone it has the gap so on my HTC g2 I see the gap but on my kindal fire I don't see the gap nor do I see it on my ipod touch.

my phone and fire are running 2.3

---

Reply to this email directly or view it on GitHub:
#3528 (comment)

[jcostanza]

I experienced the gap aswell on my Android devices. Does not happen on any of my iOS devices. Here is a screen shot of the header gap on Android 2.3.3 on a LG G2x.

http://www.flickr.com/photos/24385046@N04/7000290595/

If you scroll the content behind the header, you can see the content between the gap. I used the JSFiddle link I provided in my previous post.

[jcostanza]

I should mention that I did create my own simple CSS hack/fix for the gap issue on Android and doesn't seem to impact my iOS apps either. I don't know if this would be an acceptable solution and if it would create other problems outside of my needs but here is what works for me.

.ui-header { background-position:center -2px; overflow:visible;}

[jcostanza]

Thanks @Wilto the fix works great for the header gap across my devices.

Issue 1) still exists from the original post where UI items like select inputs and list items are being selected under navbars in a fixed position header or footer. Can we move this issue to its own thread or reopen this issue.

[vincentreboul]

This issue still exists on Android ICS 4.0.3 (tested on my tablet): main system UI bar is located at the bottom of the screen on ICS, and the 1px gap is back!

[ghost]

I can confirm the issue 3 (1px header top) on Android ICS 4.0.3 on a Samsung Galaxy S3

[arjhun]

Same issue here on the HTC desire gsm (bravo) android 2.3.7 ... using phonegap...

It only works after you toggle fixed headers, than it snaps in the correct position...

[arjhun]

Sorry, I created the problem myself. It happens when you forget to include the viewport meta tag in your head like:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">