iOS 11 Safari Bootstrap Modal Text Area Outside of Cursor

iOS 11 Safari bootstrap modal text area outside of cursor

I fixed the issue by adding position:fixed to the body when opening a modal.
Hope this will help you.

iOS 11 Semantic UI textbox modal cursor outside of textbox

So I got the idea for the fix here : Semantic-Org/Semantic-UI-React

Basically the problem relates to the height of the content behind the modal/what the modal is lying on top of. So, hide all of it when opening the Modal and put it back when done. However, only for iOS, because for some reason on our site doing otherwise breaks Android devices.

iOS: boolean = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

In opening the modal

if (this.iOS) {
    $('body > :not(ux-dialog)').hide();
    $("ux-dialog").show();
}

And closing

if (this.iOS) {
    $('body > :not(ux-dialog)').show();
    $("ux-dialog").hide();
    $("ux-dialog-overlay").hide();
    $("ux-dialog-container").hide();
}

I hope this helps someone else.

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

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

cursor out of control in textarea on IOS8 safari

find a wordaround to resolve the problem.

textarea.addEventListener('scroll', function(evt){
    evt = evt || window.evt;
    evt.target.setSelectionRange(evt.target.textLength - 1, evt.target.textLength - 1);
    setTimeout(function(){
        evt.target.setSelectionRange(evt.target.textLength, evt.target.textLength);
    }, 0);
});

iOS Safari text input cursor appears outside input box

Did you try adding overflow: hidden to the <input> CSS? I don't have a device running iOS 8.4, but that seems like it should do the trick.

---

Related Topics