webkit-overflow-scrolling forms broken on iOS 7 full-screen web app

Question

I'm having trouble with a full-screen (saved to home screen) iPhone web app on iOS7.

Typically, when an input is selected, it has scrolled into view above the keyboard.

However, this doesn't seem to happen on iOS7 for scrolling DIVs in a full-screen web app.

Thus, when a DIV uses "-webkit-overflow-scrolling: touch" and an input in the bottom half of the screen is clicked, the keyboard is fired, but the input doesn't scroll up.

AND, at that time, the input won't respond to any further onFocus events that I could otherwise scroll it up with.

Anyone seen a workaround?

Answer 1

Updating the viewport meta tag fixed it for me.

I changed this:

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

To this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

height=device-height is the actual fix (without it the viewport gets resized to accommodate the keyboard).

Answer 2

It worked on my WebApp by removing the height settings.