Question

我在Web应用程序中有一个注册功能，它通过一个四步过程向用户添加信息到站点。当用户点击“添加”按钮时按钮，出现一个Bootstrap模式，用户在步骤＃1开始。

每个步骤都有一个选项菜单供用户选择，每个步骤中填充的数据取决于之前的步骤＆＃39;选择。用户可以将步骤留空并继续，但是他们没有选择来完成剩余的过程。除了iPad上的Safari之外，此功能在每个桌面和移动浏览器中都表现得如预期。

在Safari中，用户将打开模式，在步骤1中选择数据，然后转到步骤2.如果用户未在此下拉列表中选择任何内容，则可以继续执行步骤3.但是，如果他们确实做出了选择在步骤2中，模态消失，用户无法继续。这只发生在Safari for iPad / iPhone上。

我尝试在iPad上设置网络检查器并在Mac上加载控制台，但控制台中没有错误或其他消息。我试图弄清楚这是Safari中的错误，还是Safari处理来自select标签的模态输入与其他浏览器不同。

Answer 1

让开发者朋友看一看。他补充了这个功能：

jQuery.usingSafari = function(allowDevices){
allowDevices = allowDevices != undefined ?  allowDevices : true;
if(!allowDevices){
    return /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent)  
        && navigator.userAgent.indexOf('Chrome') == -1 
        && navigator.userAgent.indexOf('iPhone') == -1
        && navigator.userAgent.indexOf('iPad') == -1 
        && navigator.userAgent.indexOf('iPod') == -1;
} else{
    var results =  /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent) &&    navigator.userAgent.indexOf('Chrome') == -1;
    return results;
}

}

//Disable backdrop
if(jQuery.usingSafari(false)) {
document.write('<style>div.modal-backdrop{ display:none; }</style>');

}

然后是模态调用：

    jQuery('#player-lightbox').modal({
            backdrop: jQuery.usingSafari(true) ? "static" : true,
            show:true}
        );

这似乎解决了这个问题。希望这有助于其他人！

Answer 2

这似乎是由fade过渡造成的。我首先检测到应用是否在iOS上运行，然后对.modal元素进行了查询并删除了类fade。这解决了iPad / iPhone上的问题。注意：模态背景可能需要一些额外的努力才能使虚拟键盘弹出和弹出更好。

举例说明：

if(isIOS())
  $('.modal').removeClass('fade');

编辑：iPad（水平）也需要

$('.modal').on('shown.bs.modal', function () {
   $(this).find('.modal-backdrop').css('position', 'absolute');
});

Answer 3

我遇到了一个类似的问题，一个容器内的一个droplist在做出选择时就消失了，这只发生在一个真正的IPAD设备上（检查chrome w /设备工具栏中有＆＃39; IPAD＆＃39;已选中工作得很好）。这似乎是上面评论中提到的已知错误。

将容器的css更改为 position：absolute 解决了我的问题。但是它会破坏其他设备的布局。视口。

修复方法是仅使用修改后的css规则来定位IPAD：

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .your-container {
    position: absolute;
  }  
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
  .your-container {
    position: absolute;
  }
}

只有从选择菜单中选择选项后，Bootstrap 3模式才会在iPad Safari上消失

3 个答案: