动态加载的Bootstrap Modal不会在iOS 9上滚动

Question

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

我发现可靠的工作(但是不可接受)的唯一解决方法是隐藏/显示模态的主体,从而强制重新计算.Bootstrap自己的handleUpdate功能不会解决问题.

我创建于上Codepen一个小例子http://codepen.io/jkrehm/full/LpRzJV/(代码可以在这里).我希望我可以在我的问题中嵌入二维码,这样你就可以轻松地在手机上找到它.

最相关的代码是这样的:

// 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选择从模态中删除 -webkit-overflow-scrolling:touch并向Webkit 提交有关它的错误.也许有一天会得到修复,也许不会.目前,提供的解决方案是最好的"解决方案".

Answer 1

我和我的同事找到了解决这个问题的方法。

\n\n

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

\n\n

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

\n\n

注意.css(\'overflow-y\', ...)线条。这就是神奇的酱汁。不过，我们没有使用实际的 CSS，而是使用类 \xe2\x80\x93 .modal-scrollfix\xe2\x80\x93，我们添加和删除该类来实现相同的结果。

\n\n

我已经创建了我以前的笔的叉子并应用了修复程序。http://codepen.io/jkrehm/full/OybdrW/（代码）

\n\n

我有一张有关此问题的 Bootstrap票证，但我不确定除了添加文档之外他们还能做什么。希望 Apple 在未来版本的 iOS Safari 中修复该问题。

\n