动态加载的 Bootstrap 模式在 iOS 9 上不滚动

Question

场景：我正在处理的项目要求将内容异步加载到 Bootstrap 3 模式中，并向用户显示加载指示。实际加载不是问题（请参阅下面的 Codepen），但是当加载的内容很大时，在 iOS 9 设备上滚动是个问题。它在我尝试过的所有其他设备上都能正常工作，包括 iOS 8。我认为 DOM 不会更新 的滚动高度，因此它认为模式不应该是可滚动的。

我发现可靠工作（但不可接受）的唯一解决方法是隐藏/显示模态框的主体，从而强制重新计算。 Bootstrap 自己的 handleUpdate 函数无法解决此问题。

我在 Codepen 上创建了一个最小示例 http://codepen.io/jkrehm/full/LpRzJV/（代码可用 here）。我希望我可以在我的问题中嵌入一个二维码，这样你就可以在手机上轻松找到它。

最相关的代码是这样的：

// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
    $(this).find('.modal-body')
        .html('loading...')
        .load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
            // Use Bootstrap's built-in function to fix scrolling (to no avail)
            $modal.modal('handleUpdate');
        });
});

如果我更改代码以便在显示模式之前加载内容，一切正常，但没有为用户提供加载指示器（只是在他们单击按钮后暂停了不确定长度在模态出现之前）。

总结：如何说服 iOS 9 重新计算 .modal-body 的滚动高度？

更新（2017 年 8 月 15 日）：

显然，这个问题没有令人满意的解决方案。 Bootstrap 已从模态框中选择了remove-webkit-overflow-scrolling:touch，并为此向 Webkit 提交了bug。也许有一天会修好，也许不会。目前，提供的解决方法是最好的“解决方案”。

Answer 1

CSS 解决方法：

.modal-dialog {
    height: 101%;
}

通过使对话框始终可滚动来工作，无论内容大小如何。

发件人：https://github.com/twbs/bootstrap/issues/20256#issuecomment-231267164

Answer 2

我和我的同事想出了一个解决这个问题的办法。

使用我上面的代码，这样的事情将使 iOS 9 上的滚动工作：

// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
    $(this)
        .css('overflow-y', 'hidden')
        .find('.modal-body')
        .html('loading...')
        .load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
            // Use Bootstrap's built-in function to fix scrolling (to no avail)
            $modal
                .css('overflow-y', '')
                .modal('handleUpdate');
        });
});

注意.css('overflow-y', ...) 行。这就是魔法酱。不过，我们没有使用实际的 CSS，而是使用了一个类 - .modal-scrollfix - 我们添加和删除它以实现相同的结果。

我已经创建了我以前的笔的一个分支并应用了修复。 http://codepen.io/jkrehm/full/OybdrW/ (code)

我有一个 ticket 用 Bootstrap 打开关于这个问题，但我不确定他们能做什么，除了添加文档。希望 Apple 在未来版本的 iOS Safari 中解决这个问题。

Answer 3

我设法通过在通过 javascript 动态加载内容后添加以下行来解决此问题：

$("div#myModal").css('overflow', 'auto');