iOS 7, Keyboards, and Height: A Lesson in Confusion

It might be a bug, or it might be an intended change… but the keyboard affects iOS web views in new ways with iOS 7.

Taking a look at three different ways to view a web page, we see different behaviors for the height of the document:

  1. In a fullscreen/homescreen web app: The height on an iPhone 5s of the app is 548px (20 less than the screen's height, to account for the status bar). When a keyboard opens, the height changes to 288px (or the screen height less the 20px for the status bar and less the height of the keyboard. On iOS 6 and earlier, regardless of the keyboards presence the height was 548px.
  2. In a WebView inside another app: Similar behavior to the fullscreen app. Whatever the height of the WebView is what is returned for the document height. When the keyboard appears it shrinks the height to the remaining screen real estate left by the keyboard. Again, this was not the case in earlier iOS versions.
  3. In plain, ol' Safari: The height does not change when the keyboard appears. It appears on top of the web view and does not affect the document. Just like we always remembered.

Why is this relevant?

Check out this iOS 7 keyboard issue demo in both iOS 7 Safari and as a fullscreen app saved to the home screen. You can, of course, also check it out in other browsers where a keyboard comes up on the screen including earlier iOS versions.

Obvious cases are elements that are positioned absolute or fixed at the bottom (shown on the demo page). They will float up with the keyboard and potentially cover up the focused input. This is all the more likely to be annoying on a 3.5-inch screen (or… change to landscape). The demo page will act a little buggy if you try this in landscape because if you tap the text field, the keyboard will come up and the footer will cover up the field. The focus event is never actually triggered, but the keyboard is up and there is a cursor in the covered field… though you likely will not be able to type in it.

Use of flexbox can also create similar unintended scenarios. Additionally, people are also seeing the power of min/max-height. Depending on what changes in the media query, this issue could cause jarring results to the user.

Next Steps

So... I'm not sure where we go from here. I've not found much discussion of this (hence my write-up). If you have thoughts or find new information, let me know on twitter (@dancwilson). I'll follow up with anything I find.