iOS 11 Safari引导模式文本区域位于游标外部

Question

使用iOS 11 safari,输入文本框光标位于输入文本框之外.我们不明白为什么会遇到这个问题.正如您所看到的,我的焦点文本框是电子邮件文本输入,但我的光标不在其中.这仅适用于iOS 11 Safari

Answer 1

我通过position:fixed在打开模态时添加到主体来解决问题.希望这会帮助你.

Answer 2

就个人而言,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.3 - 更正错误**

从iOS 11.3开始,该错误已得到纠正.有没有需要测试OS 11_在iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

但要小心,iOS 11.2仍然被广泛使用(截至2018年4月).看到

统计1

统计2

Answer 3

这个问题超越了Bootstrap,而不仅仅是Safari.这是iOS 11中的完整显示错误,在所有浏览器中都会出现.上述修复程序并未在所有实例中修复此问题.

这里详细报告了这个bug:

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

据说他们已经向苹果报告了这个错误.

Answer 4

令人沮丧的错误,谢谢你找到它.否则,我会把我的iphone或我的头撞在墙上.

最简单的修复是(1行代码更改):

只需将以下CSS添加到html或外部css文件即可.

<style type="text/css">
.modal-open { position: fixed; }
</style>

这是一个完整的工作示例:

.modal-open { position: fixed; }

<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>

我在这里提交了一个问题:https: //github.com/twbs/bootstrap/issues/24059