Twitter Bootstrap 模态背景不会覆盖 iPad 上的整个屏幕

我正在使用Twitter Bootstrap包中的模态组件。此模式通过单击按钮打开，其内容通过 Ajax 调用动态加载。以上所有功能在PC（FF，Chrome）和iPad（Safari）上都可以正常工作。但是，在iPad上，如果在单击按钮之前将屏幕向下滚动一点，则模态的背景将仅覆盖屏幕的一部分（取决于屏幕向下滚动的程度）。如果页面滚动，背景会跳转到其正确位置（覆盖模态后面的整个屏幕）。

将不胜感激任何帮助，因为它看起来很丑，背景仅部分覆盖了屏幕。

不影响它的事情：

• "淡入淡出"类
• 模态代码在 DOM 中的定位。
• 通过Javascript手动滚动页面

下面我将包括一些剥离的代码（内部控制等为简洁起见而被删除）。

模态：

<div id="tehtavaModal" class="modal hide fade">
    <div class="modal-header">
        <a class="close" data-dismiss="modal" href="#">&times;</a>
        <h3 id="tehtavaModalOtsikko"></h3>
    </div>
    <div class="modal-body">
        <div id="tehtavaModalSisalto"></div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Sulje</a>
        <a href="#" class="btn btn-primary" data-dismiss="modal">Tallenna Vastaukset</a>
    </div>
</div>

打开模态的函数：

function haeTehtava(tehtavaID) {
    $('#tehtavaModalOtsikko').html('Tehtävä');
    $('#tehtavaModalSisalto').html('<p>Tehtävää haetaan...</p>');
    $('#tehtavaModalKysymykset').html('');
    $('#myCarousel').hide();
    $.getJSON("Sivu/HaeTapahtuma", { 'tyyppi': 4, 'ID': tehtavaID }, naytaTehtava)
        .error(function () { $('#tehtavaModalSisalto').html('<div class="alert alert-error">Tehtävän haussa tapahtui virhe.</div>'); });
    $('#tehtavaModal').modal();
}

回调函数（naytaTehtava）只是填充模态的一些内部部分。

调用函数的链接：

<a href="#" onClick="haeTehtava(1);">Open Modal</a>

Twitter Bootstrap页面上给出的示例有效，所以我想知道我可能做什么不同的事情？

编辑：另外注意的是，如果使用数据属性打开模态，它可以正常工作。该问题仅在通过脚本打开模式时显示。