search

anseki / jquery-plainmodal

The simple jQuery Plugin for fully customizable modal windows.
http://anseki.github.io/jquery-plainmodal/
MIT License
78 stars 11 forks source link

iPad virtual keyboard pushes modal off screen #8

Closed cretace closed 7 years ago

cretace commented 7 years ago

I know this is not a bug with your code - the problem seems to lie with Apple !

I show a plainModal window for text entry - centred on the screen - but on iPad the virtual keyboard appears as soon as you hit a text box, and it pushes the modal window up, so the top of the modal and the active text box, is pushed off screen. It can't be scrolled back. Any ideas how to deal with this?

Thanks for any tips

anseki commented 7 years ago

Hi @cretace,

By default, the modal window is put on the center of the browser window when the modal window is opened and the browser window is resized. Therefore it is positioned at the center always even if the browser window is resized by virtual keyboard. I think that you might have specified offset option, and it is static coordinate that fits the full size browser window. If you want to put the modal window on a place other than the center, you can specify a function for offset option. The function can set the position according to the situation.

cretace commented 7 years ago

Hi anseki I can't fix this problem - I didn't have offset values. The problem is that on Safari iPad, as soon as I click a text field in my entry form (in the modal) the virtual keyboard is so big that it pushes the top of the modal box off the top of the screen - iPad then fails to scroll the clicked text field back into view. After dismissing the keyboard Safari then fails to re-centre the modal. It's a mess - none of it is your plugin's fault. Apparently Safari struggles with postion absolute and form inputs.

anseki commented 7 years ago

As you said, unfortunately iOS Safari seems having the bug about virtual keyboard. It irk us even when plainModal is not used. Big two problems, resize event to find that the keyboard opened is not fired, and scrollHeight for getting size of viewport returns a value without the keyboard height.

So, it seems that we can get that the keyboard opened and closed by focus and blur events of the text box. But unfortunately there is no way to get the size of viewport, we can not know a position the modal window should be put on. I tried to hide all contents in the page except the text box when the keyboard opened, that is, there is only the text box in the page. Then, the text box is shown regardless of the size of viewport. Yes, I know that this way is not smart... But at least, it seems that it works fine.

Did you read this? http://stackoverflow.com/questions/2593139/ipad-web-app-detect-virtual-keyboard-using-javascript-in-safari

anseki commented 7 years ago

No reply came, and I close this issue.