Issue with iOS 7 Mobile Safari Scroll Events on Keyboard Up and Down

Question

I am testing some scroll events and noticed that there is a scroll event fired in iOS 7 Mobile Safari on keyboard up, but not on keyboard dismiss/down. I was wondering if anyone has any knowledge to why this is?

I personally think that this is a bug (and am trying to report it but can't login to bug tracker at the moment), and that they should pick to throw scroll events on both keyboard up and down, or choose to not throw them at all since it seems that the view returns to its previous state.

To demonstrate the issue I created this little site where you can click on the the input box and see that a scroll event fires on keyboard up, but does not fire when done is pressed on the keyboard menu and the screen scrolls to it's initial position. I added a scannable qr code that sends you to the test url also below. Thanks in advance!

TEST URL: http://lp.mydas.mobi/test/cs/scroll_issue/error.html

TEST qr:

Answer 1

Ran into this issue the other day in a Phonegap app, but the behavior seems consistent with the new Safari as well.

As best I can tell, the new Safari resizes the viewport reported to the web page when the keyboard is up. I had a page with height of 100% and a nav absolutely positioned at the bottom of the page. When the keyboard came up, the nav came with it. Annoyingly, this caused 2 of my input fields to lose focus, hiding them and making it impossible to complete the login!

Previously, I avoided using height=device-height in the viewport meta tag because OLD Safari didn't seem to understand anything about the status bar, and the reported device-height was always 20px too tall, resulting in 20px scroll to see the very bottom of the page.

The fix I ended up using was setting height=device-height and iOS7 didn't have any of the issues with the viewport resizing/nav overlap. To my surprise, the page remained 100% of the device height in ALL cases.

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">

To get this fixed-height situation to work consistently with iOS5 and 6, I did a little device detection and manually calculated the device height - 20 px, resetting the viewport tag.

function iOSversion() {
  if (/iP(hone|od|ad)/.test(navigator.platform)) {
    // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
    return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
  }
}

ver = iOSversion();

if (ver[0] >= 5 && ver[0] <= 6) {
  $('head meta[name="viewport"]').attr("content", "width=device-width, height="+(window.innerHeight-20)+", user-scalable=no")
}

I feel kind of wrong about this solution, but stuck between a rock (new Safari) and a hard place (old Safari), this was my answer.

If you find a better way, please please please let me know! Good luck :)