Fixed header jumps around when iOS keyboard disappears

[jhogervorst]

Issue description

We have a page with some input elements, a link or button, and a fixed header. Let's say you tap an input element and the iOS keyboard appears. Two things could happen:

• When you scroll the page and dismiss the keyboard while the page still scrolls, the header does not return to its fixed position.
• If you tap a link or button, the header shows up somewhere in the (vertical) middle of the screen and only returns to its fixed position after manually scrolling.

Especially the latest issue causes trouble, because people will often tap a link or button after entering something in an input field.

Test page

Here's a test page.

Open the page and tap one of the textareas. Now scroll the page and quickly tap the keyboard dismiss button. The fixed header will remain hidden.

Tap one of the textareas again and scroll to the link and button down on the page. Tap one of them. The header will end up in the middle of the page. Scroll a bit, and it'll jump back to the top.

Platforms/browsers and devices tested

• Safari on iOS 6.0.2 (iPad mini).

jQuery Mobile and jQuery core version used

• JS Bin test page: jQuery Mobile latest and jQuery 1.9.0.

Other relevant information

I know there have been more issues regarding the iOS keyboard together with fixed headers, but I'm not sure what's relevant so I just opened a new issue. Hope you don't mind.

If it helps I can make a short video showing the two problems. Let me know if it'd help.

[jaspermdegroot]

I can reproduce the issue on iPad4 iOS 6.0.1. It has been addressed before https://github.com/jquery/jquery-mobile/blob/master/js/widgets/fixedToolbar.js#L240

[arschmitz]

I'll look into this since I did original fix. This was pre ios6 though so will have to see what's changed

[arschmitz]

this has been fixed by commit 96a4f42

[jhogervorst]

This issue is not completely resolved!

The bug regarding dismissing the keyboard while the page is being scrolled is fixed. However, the bug when tapping a link/button when the keyboard is visible, does still occur.

Open up my test page (it references the latest version). Tap one of the textareas again and scroll to the link and button down on the page. Tap one of them. The header will end up in the middle of the page. Scroll a bit, and it'll jump back to the top.

I've made a video (MOV; 33MB) in which I demonstrate the issue in Safari on my iPad mini running iOS 6.1.

[jhogervorst]

I see the issue is currently planned for milestone 1.4.0. I understand it's not a critical bug. However, when using jQuery Mobile for a project which contains many forms (an interactive web application), this bug is really annoying.

Could you maybe reconsider the milestone for this bug?

If you have an idea where (which component/file) this should be fixed, I would be glad to take a look at the source code and see whether I can fix it (or provide a simple workaround). However, I'm not enough into the jQuery Mobile source to easily find this by myself.

[jaspermdegroot]

@jhogervorst

Since we planned to fix this in 1.3 but couldn't fix the whole issue it makes sense to set the milestone to 1.3.1. I think the 1.4 was my mistake.
If we find a way to fix this issue you will find a link to the commit here so you can see for yourself if you already want to apply them.

[jaspermdegroot]

Closing this ticket in favor of re-opening #4113

[jaspermdegroot]

@jhogervorst

This should be fixed in lastest code.