如何以弹出形式在 IOS11 Safari 上正确定位光标？

Question

在我们将我的 iPhone 升级到 IOS11 之后，我开始在我的登录 window 中看到一个随机位置的光标。这也发生在 Chrome / IOS11。光标位置在下面的屏幕截图中被标记为红色。

Answer 1

尝试将 position: fixed 添加到页面正文。

Answer 2

Ignacios Answer 为我解决了问题。 如果我显示 overlayer/modal 我将 class 固定到正文。 还要添加到 css 这条规则：

body.fixed{
  position: fixed;
}

Answer 3

我遇到了同样的问题，body 上的 position: fixed 解决方案确实解决了这个问题，这很好。不过要注意的一件事是，将 class 添加到 body 会导致浏览器 "jump" 到页面顶部，因此当您在 popup/modal 关闭时将其删除这可能会让用户感到困惑。

如果你的 popup/modal 在 iOS 上是全屏的，你可以做的是在添加 position: fixed class 之前保存滚动位置，这样的东西（使用 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;
}

希望对您有所帮助！

Answer 4

借用 ybentz 的回答。如果您使用 bootstrap 模式，您可以将其添加到您的 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，因为您已经在模态弹出时添加了模态打开 class：

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

感谢ybentz的帮助！！我会回复你的评论，但我还没有这样做的声誉。

Answer 5

我已经用 CSS

解决了这个问题

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

Answer 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 - 仅限选定的模态**

我修改了函数以仅针对具有 class .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 添加 class inputModal 到模态

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

注意事项 javascript 函数现在是 self-invoking

REF :