如何在弹出窗体中将光标正确放置在IOS11 Safari上?

时间:2017-09-23 17:09:52

标签: ios iphone google-chrome mobile-safari ios11

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

Login screen with misplaced cursor

Another screen with the same problem

6 个答案:

答案 0 :(得分:8)

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

答案 1 :(得分: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,因为你已经在模态弹出的时候添加了模态开放类:

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

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

答案 2 :(得分:0)

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

body.fixed{
  position: fixed;
}

答案 3 :(得分:0)

我遇到了同样的问题,position: fixed上的body解决方案确实解决了这个问题,所以这很好。需要注意的一点是,将类添加到body会导致浏览器“跳转”到页面顶部,因此当弹出/模态关闭时将其删除可能会让用户感到困惑。

如果你的popup / modal在iOS上是全屏的,你可以做的就是保存滚动位置,然后在添加position: fixed类之前使用类似的东西(使用jQuery但可以使用{{3 }}):

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;
}

希望有所帮助!

答案 4 :(得分:0)

就个人而言,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函数现在是自我调用的

参考:iOS 11 Safari bootstrap modal text area outside of cursor

答案 5 :(得分:-1)

我已用此CSS修复了此问题

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