如何在弹出窗体中正确定位IOS11 Safari上的光标？

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.

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

6 个解决方案

#1

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

尝试添加位置:固定到页面正文。

#2

Piggybacking off of ybentz's answer. If you use the bootstrap modal, you can add this to your main.js file:

撇开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);
 });

And then this to your css because you'll already have the modal-open class being added anytime the modal pops:

然后这个到你的CSS,因为你已经在模态弹出的时候添加了模态开放类:

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.

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

#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:

Ignacios Answer为我解决了这个问题。如果我显示覆盖层/模态我添加固定到正文的类。还要添加到css这个规则:

body.fixed{
  position: fixed;
}

#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):

如果您的弹出/模态在iOS上是全屏的,那么你可以做的就是在添加position:fixed类之前保存滚动位置,使用类似的东西(使用jQuery但可以使用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

而你的css将是

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

Hope that helps!

希望有所帮助!

#5

I have fixed this issue with this CSS

我用这个CSS解决了这个问题

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

#6

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.

为了避免惩罚其他设备和版本,我将此修复程序仅应用于相应的iOS版本。

---

**VERSION 1 - All modals fix**

For the javascript/jQuery

对于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

对于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

我修改了函数,仅针对具有类.inputModal的选定模态触发

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

只有具有输入的模态才会受到影响,以避免滚动到顶部。

For the javascript/jQuery

对于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

对于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

对于HTML将类inputModal添加到模态

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

Nota bene The javascript function is now self-invoking

Nota bene javascript函数现在是自我调用的

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

REF:游标外的iOS 11 Safari引导模式文本区域