search

scottjehl / Device-Bugs

Just a collection of quirks and issues that occur on browser platforms (particularly those unlikely to update)
864 stars 19 forks source link

iOS Safari/Chrome - unwanted scrolling when focusing an input inside the modal #70

Closed limonte closed 7 years ago

limonte commented 8 years ago

You can test this issue here: https://sweetalert2.github.io/ with iOS device of course :) For other devices (desktop, Android) there's no such bug.

Tested in Safari and Chrome - the same result, so I think it's iOS issue.

This happens only if there's an input inside the modal and I tap that input. In the same moment that input got focus and native iOS keyboard become visible.

Page below modal in the same moment is automatically scrolled to 50% of its height. This behaviour is totally unwanted and I have no clue how to prevent this default iOS "feature".

Demo:

ezgif com-resize 1

I have no clue how to fix this issue, any help will be much appreciated.

toddparker commented 8 years ago

When an on screen keyboard opens, it changes the viewport height so I'd start there. I think Android and other mobile platforms behave in similar ways to accommodate the keyboard.

limonte commented 8 years ago

@toddparker

When an on screen keyboard opens, it changes the viewport height so I'd start there. I think Android and other mobile platforms behave in similar ways to accommodate the keyboard.

Yes, viewport height is changed as keyboard is shown in both Android and iOS devices. But notice how page below modal overlay behaves. On iOS it scrolls to 50% of it's height and I don't want it to.

toddparker commented 8 years ago

Ah, I see. Not sure I have an answer for you on this one. Keyboards, scrolling, and focus are a tricky combo.

sjelfull commented 7 years ago

If I understand the problem correctly, the easy fix here it to save the current scroll position, and then prevent overflow on body/html.

After, when you close the modal, allow overflow again, and restore the page to the saved scroll position.