Header and footer change their position after keyboard popup - iOS

[mletynski]

When the content of page does not suit whole screen and we need to scroll, we have a problem with header and footer position.

Just open this link from safari ipad simulator:

http://jsfiddle.net/6ghtb/4/show/

Just click on input number 10 (last one which is visible before scrolling) and observe footer. It just jump and leave space between himself and the keyboard ...

When you scroll down and click most upper input, you have the same problem with header.

screenshot:
https://www.evernote.com/shard/s194/sh/c801a939-06a7-47cc-a3b8-70bb03af0ca1/30f7d6eb650566bfe6032f634b0381e5

[tompie]

We're facing the same issue. Any workarounds etc. available?

Thanks

[mletynski]

Come on guys, nobody will answer that ? This bug shows that fixed toolbars are breaking the gui.

[agcolom]

@mletynski Thanks a lot for the jsfiddle. With which version of iOS are you experiencing this problem?

Thanks,

Anne

[mletynski]

@agcolom for iOS 5 and 5.1

[agcolom]

@mletynski I cannot reproduce on the iPod Touch iOS 5.0.1 (do you only experience this on the iPad with iOS 5 and 5.1 or do you see this also on the iPhone/iPod Touch? I'll be able to test on the iPad simulator 5.x later this evening. I have also noticed that you don't have
<meta name="viewport" content="width=device-width, initial-scale="1"">
If you add it as in http://jsfiddle.net/agcolom/6ghtb/5/show/ does it make any difference?

[mletynski]

I didnt try to reproduce it on iphone or ipod. Im reproducing it on iPad with iOS 4/5 and on iPad simulator 5 and 5.1

My real example has:

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />"

which unfortunetly does not make any difference ;/

[mletynski]

@agcolom did you reproduce it ? I can also reproduce it on iPhone 5.1 simulator easly. Important thing here is that content need to be scrollable.

[agcolom]

@mletynski yes, I just managed to reproduce it on the iPad2 iOS5.1. We had a similar issue a while ago, but it got solved, so I need to check how we solved it then.

[agcolom]

This looks linked/similar to #1087

[mletynski]

@agcolom thanks for the hint. I checked what was introduced there and "hideDuringFocus" was added. It is what we are looking for. Unfortunetly there is a "bug" there, in line 7305:

"if( screen.width < 500 && $( e.target ).is( o.hideDuringFocus ) &amp;&amp; !$( e.target ).closest( ".ui-header-fixed, .ui-footer-fixed" ).length ){"

It is is applied only for screen.width<500 ... I don't know why here is such condition ... but for our ipad it is 768 ..

Look like easy fix ...

[toddparker]

@mletynski - Did changing that width threshold fix the issue for you? I think we added this logic because we hide toolbars on smartphones to leave more room for input and virtual keyboard. We figured that at tablet sizes (>500px), there would be enough space to comfortably view the toolbars + input + keyboard so it might look ood to have the toolbars hiding and showin focus/blur.

[mletynski]

@toddparker - Yes it works for me after increasing this width threshold.

[toddparker]

@mletynski When you do this, don't the toolbars hide on focus? Do yo think that feels odd?

[mletynski]

@toddparker Yes they are flickering. But i changed this code a little bit (i removed animated part), so the show and hide are invoked immediately and everythink works perfectly for me.