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.

Answer 3

Ignacios Answer solved the Problem for me. If i show an overlayer/modal i add the class fixed to the body. Also add to css this rule:

body.fixed{
  position: fixed;
}

Answer 4

I had the same problem and the position: fixed solution on the body does solve it so that's great. One thing to note though is that adding the class to the body causes the browser to "jump" to the top of the page so when you remove it when the popup/modal is closed it might be confusing for the user.

If your popup/modal is full screen on iOS what you can do to fix it is save the scroll position before adding the position: fixed class with something like this (using jQuery but can be done easily with vanilla js):

var savedScrollPosition = $(window).scrollTop()
$('body').addClass('has-fullscreen-modal')

and then restore it on popup close like this:

$('body').removeClass('has-fullscreen-modal')
window.scrollTo(0, savedScrollPosition)

and your css will be

body.has-fullscreen-modal {
  position: fixed;
}

Hope that helps!

Answer 5

Personally, position: fixed scroll to top automatically. Quite annoying !

To avoid penalizing other devices and versions I apply this fix only to the appropriate versions of iOS.

---

**VERSION 1 - All modals fix**

For the javascript/jQuery

$(document).ready(function() {

    // Detect ios 11_x_x affected  
    // NEED TO BE UPDATED if new versions are affected
    var ua = navigator.userAgent,
    iOS = /iPad|iPhone|iPod/.test(ua),
    iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

    // ios 11 bug caret position
    if ( iOS && iOS11 ) {

        // Add CSS class to body
        $("body").addClass("iosBugFixCaret");

    }

});

For the CSS

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

---

**VERSION 2 - Selected modals only**

I modified the function to fire only for selected modals with a class .inputModal

Only the modals with inputs should be impacted to avoid the scroll to top.

For the javascript/jQuery

$(document).ready(function() {

    // Detect ios 11_x_x affected
    // NEED TO BE UPDATED if new versions are affected 
    (function iOS_CaretBug() {

        var ua = navigator.userAgent,
        scrollTopPosition,
        iOS = /iPad|iPhone|iPod/.test(ua),
        iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

        // ios 11 bug caret position
        if ( iOS && iOS11 ) {

            $(document.body).on('show.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {
                    // Get scroll position before moving top
                    scrollTopPosition = $(document).scrollTop();

                    // Add CSS to body "position: fixed"
                    $("body").addClass("iosBugFixCaret");
                }
            });

            $(document.body).on('hide.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {         
                    // Remove CSS to body "position: fixed"
                    $("body").removeClass("iosBugFixCaret");

                    //Go back to initial position in document
                    $(document).scrollTop(scrollTopPosition);
                }
            });

        }
    })();
});

For the CSS

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

For the HTML Add the class inputModal to the modal

<div class="modal fade inputModal" tabindex="-1" role="dialog">
    ...
</div>

Nota bene The javascript function is now self-invoking

REF : iOS 11 Safari bootstrap modal text area outside of cursor

Answer 6

I have fixed this issue with this CSS

@media(max-width:767px) {
    body {
        position:fixed !important;
        overflow:auto !important;
        height:100% !important;
    }
}