iOS 7 home-screen web app form input issue

[jkatzen]

On a home screen web app (i.e, open up the forms demo, add the full screen web-app meta tag, load it up on an iPhone, and save it to your home screen), When a form field is in the bottom half of the screen, the keyboard covers it up and won't scroll it up automatically.

Additionally, the field is 100% non-reactive when behind the keyboard. So I can't use an onFocus event to scroll it up. Typing doesn't even work when it's hidden.

This only happens for a saved web app. Regular mobile Safari is fine with it.

FYI, here were my meta tags:

[davidpfahler]

I was able to reproduce this problem. I recorded a screencast video of my iPhone 4S (iOS 7) to show what exactly the problem is. I think this is a problem and needs to be addressed.

Tested with iPhone 3GS and iOS 6 as well. Same problem, but it seems to not depend on whether you add to homescreen or not. It's broken in mobile safari as well.

[jkatzen]

David, I think that's a different issue. You're running it in Safari, not full-screen. And it IS scrolling into view there when you click the input.

The error you're seeing (it seems to limit the scrolling after you've clicked on a form field in mobile safari) I don't think is related.

[davidpfahler]

@jkatzen Thanks for letting me know. It seems indeed I stumbled on another but. I think that's what @cubiq means when he says that forms are hard to do with scrolling.

I create another video trying to recreate your problem. I'm not sure if this is what you mean, but it seems broken. The lower bar should not jump up when the field is focused. However, I think this is a CSS issue, not iScroll per se.

[jkatzen]

@davidpfahler I think it's a webkit-overflow-scrolling issue. Overflowing DIVs simply don't scroll up into view when a form field is selected in a full-view-home-screen web app.

Seems like a clear iOS 7 bug, but who knows when it'll be fixed. I was hoping a Javascript wizard might be able to find some magic with eventlisteners or the like to add to iscroll.

In the mean time, we're going to have to (1) disable footers and (2) do full-page scrolling for forms in our web app.

[jkatzen]

Okay, there seems to be a workaround found in the outer community.

http://stackoverflow.com/questions/18949647/webkit-overflow-scrolling-forms-broken-on-ios-7-full-screen-web-app

Setting an explicit viewport height seems to do the trick.

There's a bug, however, with iscroll, in that after losing focus, the page loses the ability to scroll up above the field. It always bounces back as if the top of the page were immediately above the field . . .

Turning off iscroll and treating the scrolling section as a normal overflow div works fine now with forms if you use that explicit height.

So . . . it would seem that iscroll could be patched to solve this less systemic issue.

[davidpfahler]

Probably, IScroll needs to be refreshed after each blur event.

[agfa555]

Any ideas on this one??? Is this happening on v5??? I'm still using v4.

Thanks.

[davidpfahler]

Homescreen web apps are broken in many regards in iOS 7. Practically we can forget homescreen web apps for now, unfortunately. :(

[adam-marshall]

Any update?