4

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: QR URL Code

shibbybird
  • 1,245
  • 13
  • 28
  • iOS7 is the buggiest browser ever. I think they should roll it back – Vicky Gonsalves Oct 04 '13 at 04:00
  • well... lets not get carried away here there is ie 6 still floating around... :p – shibbybird Oct 04 '13 at 04:09
  • Oh i dint even think of it :p – Vicky Gonsalves Oct 04 '13 at 04:12
  • I'm struggling with the same problem (ie. trying to stop those pesky scroll events.) Good luck, and I'll let you know if I find something! – changelog Oct 09 '13 at 13:14
  • You might want to take a look to this topic as well - http://stackoverflow.com/questions/19237918/cordova-phonegap-3-1-keyboard-still-overlays-focused-form-fields-ios-7. Its not exactly same, but good enough for ideas. – Siddhartha Gupta Oct 12 '13 at 20:46
  • Thanks for the link I changed my code before I wrote this to better handle this new event. However it still is boggling my mind why this was done on the Mobile Safari update... – shibbybird Oct 14 '13 at 17:03

2 Answers2

7

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

chrisgonzalez
  • 4,173
  • 1
  • 16
  • 15
1

Are you using phonegap or what? if you are using phonegap with iscoll.js then you just need to refresh your scroller when keyboard event fires in your device.

here is the link for keyboard event: keyboard event

and on close keyboard you just need to call this code :

window.scrollTo(0, 0);
Community
  • 1
  • 1
Anup
  • 3,283
  • 1
  • 28
  • 37