How can I properly position a cursor on IOS11 Safari in popup forms?

Question

After we upgraded my iPhone to IOS11, I started seeing a cursor in a random position in my login window. This also happens on Chrome / IOS11. The position of the cursor is marked red on screenshots below.

Answer 1

Try adding position: fixed to the body of the page.

Answer 2

Piggybacking off of ybentz's answer. If you use the bootstrap modal, you can add this to your main.js file:

 var savedScrollPosition;

 $(document).on('show.bs.modal', '.modal', function() {
     savedScrollPosition = $(window).scrollTop();
 });

 $(document).on('hidden.bs.modal', '.modal', function() {
     window.scrollTo(0, savedScrollPosition);
 });

And then this to your css because you'll already have the modal-open class being added anytime the modal pops:

body.modal-open {
     position: fixed;
     width: 100%;
}

Thanks for the help ybentz!! I would've responded to your comment, but I don't have the reputation to do so yet.