I have a content div
with min-height: 100%;
and a relatively positioned footer div
with a negative margint-top
so the footer would stay at the bottom of the screen. The two divs are siblings.
The problem I'm facing comes up when user splits a docked iPad keyboard. If the input field in focus is near the bottom of the screen, the whole page is "pushed" upward to accommodate for keyboard. This excess bottom space disappears once "merged" keyboard is dismissed, but it stays there if the keyboard is split, making the page higher then it is, which makes it possible for user to scroll off screen.
I've tried using <meta name="viewport" content="height=device-height" />
but it didn't make any difference regarding described behavior.
This is happening in both Safari and Chrome on iOS 7.1