iPhone keyboard shrinks modal size for web application

Question

I have a site that has a modal on it. When a div is clicked, the modal pops up. There is an input in the modal. When viewing the site on a mobile device, I have an issue where I when the input is clicked, the iPhone keyboard pops up. The modal appears to stay the same size, but if I then close the iPhone keyboard, the modal is shrunken to the screen size minus the keyboard size.

Answer 1

There appears to be a bug with iOS and the rendering of position:fixed; elements when using the virtual keyboards.

You should try changing your modal to use position:absolute; and see if that corrects the issue.

You can also try the User Agent Sniffing method here.