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

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 HTMLAdd the class inputModal to the modal

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

Nota beneThe javascript function is now self-invoking

**UPDATE iOS 11.3 - Bug corrected 😃🎉 **

As of iOS 11.3, the bug has been corrected. There is no need to test for OS 11_ in iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

But be careful as iOS 11.2 is still widely used (as of April 2018). See

stat 1

stat 2

This issue goes beyond Bootstrap, and beyond just Safari. It is a full display bug in iOS 11 that occurs in all browsers. The fix above does not fix this issue in all instances.

The bug is reported in detail here:

https://medium.com/@eirik.luka/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

Supposedly they already reported it to Apple as a bug.