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?

Denyse

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).

Conqueror

Awesome! Setting the height to device-height is breaking some other things on our app (we have a fixed footer bar that is moving up above the keyboard when device-height is used, because iOS7 shrinks the device height when the keyboard shows). BUT . . . setting it explicitly to something very large, like 10000 pixels makes it mostly work, save for a lot of extra whitespace. (The extra whitespace is certainly the lesser of evils, however.) – Denyse

target-densityDpi=device-dpi is deprecated and you can easaly remove it. petelepage.com/blog/2013/02/… – Wilk

This works for me, but then I get this issue: #11804928 – Shurlocke

Answer 2

It worked on my WebApp by removing the height settings.

Mouser