Ответ 1

Попробуйте добавить position: fixed к телу страницы.

Ответ 2

Вывод из ответа ybentz. Если вы используете bootstrap modal, вы можете добавить это в свой файл main.js:

 var savedScrollPosition;

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

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

И затем это к вашему css, потому что вы уже добавите модально-открытый класс в любое время в модальных попках:

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

Спасибо за помощь ybentz!! Я бы ответил на ваш комментарий, но у меня пока нет репутации.

Ответ 3

Игнасиос ответ решил проблему для меня. Если я покажу наложение/модальный, добавьте класс, закрепленный в теле. Также добавьте в css это правило:

body.fixed{
  position: fixed;
}

Ответ 4

У меня была та же проблема, и решение position: fixed на body действительно решило его так, чтобы это было здорово. Следует отметить, однако, что добавление класса к body заставляет браузер "прыгать" вверху страницы, поэтому, когда вы удаляете его, когда всплывающее/модальное закрытие, это может смутить пользователя.

Если ваш всплывающий/модальный полный экран в iOS, что вы можете сделать, чтобы исправить это, сохраните позицию прокрутки перед добавлением класса position: fixed с чем-то вроде этого (используя jQuery, но с легкостью можно сделать с vanilla js):

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

а затем восстановить его при всплывании, как показано ниже:

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

и ваш css будет

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

Надеюсь, что это поможет!

Ответ 5

Я исправил эту проблему с помощью этого CSS

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

Ответ 6

Лично position: fixed прокрутите вверх автоматически. Довольно раздражает!

Чтобы избежать штрафа за другие устройства и версии, я применяю это исправление только к соответствующим версиям iOS.

** ВЕРСИЯ 1 - Исправление всех модалов **

Для 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");

    }

});

Для CSS

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

** ВЕРСИЯ 2 - Только выбранные модальности **

Я модифицировал функцию для запуска только для выбранных модалов с классом .inputModal

Чтобы избежать прокрутки вверх, нужно влиять только на модалы с входами.

Для 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);
                }
            });

        }
    })();
});

Для CSS

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

Для HTML Добавьте класс inputModal в модальный

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

Nota bene Функция javascript теперь самозапускается

REF: iOS 11 Модальная текстовая область загрузки Safari вне курсора