我在 iOS 12 上的 Safari 的 iframe 中显示的 Bootstrap 4.1 模式有问题。测试的所有其他浏览器都按预期工作(甚至是 iOS 11 上的 Safari)。该问题似乎特定于 iOS 12。
我创建了一个 minimal example demonstrating the issue .前两个按钮似乎按预期运行，但是最后 4 个按钮您可以看到问题，向下移动时每个按钮都更糟，当您尝试滚动或关注内部的元素时，最后一个按钮一起消失模态(见下面的截图):
我会注意到我们正在以一种可能有点非正统的方式处理此功能，因为我们不是允许 iframe 的内容滚动，而是在它加载后通过在父子之间传递消息来调整它的高度message 事件处理程序和 postMessage:https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
这是我怀疑出现问题的地方(但尚未能够追踪到它(如前所述，这只是运行版本 12 的 ios 设备上的问题))。
编辑
最近发现这个问题并不是 iOS 12 上的 Safari 特有的，chrome 也是如此。
下面的代码来自之前的最小示例链接:
父级(/modal-test/index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./jquery.min.js"></script>
<script src="./popper.min.js"></script>
<script src="./bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$ifCon = $("#ifCon");
window.addEventListener("message", function(event){
if(event.data.method === "returnWindowSize"){
$ifCon.height(event.data.content);
}
}, false);
});
</script>
<style>
#ifCon {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F2F2F2;
overflow: hidden;
border-radius:10px;
border:1px solid grey;
margin-left:auto;
margin-right:auto;
/*box-shadow:2px 2px 3px #000;*/
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
}
#ifCon iframe {
flex-grow: 1;
border: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col text-center">
<div id="ifCon">
<iframe height="100%" width="100%" scrolling="no" src="/modal-test/frameable.html"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
子级(/modal-test/frameable.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./jquery.min.js"></script>
<script src="./popper.min.js"></script>
<script src="./bootstrap.min.js"></script>
<script>
var $embedContent, modalState;
$(document).ready(function(){
$embedContent = $('#embedContent');
parent.postMessage({method:"returnWindowSize", content:$embedContent.height()}, '*');
$('.modal').on('shown.bs.modal', function(e){
modalState = {
id:$(this).attr('id'),
contentElement:$(this).find('.modal-content'),
initialContentContainerHeight:$embedContent.height(),
invokerElement:$(e.relatedTarget)
};
adjustModal();
});
$('.modal').on('hidden.bs.modal', function(e){
modalState = null;
$(this).find('.modal-content').css("margin-top", "0px");
$embedContent.css('height', 'auto');
parent.postMessage({method:"returnWindowSize", content:$embedContent.height()}, '*');
});
});
function adjustModal(){
if(modalState.contentElement.css('margin-top') !== modalState.invokerElement.offset().top){
modalState.contentElement.animate({'margin-top':modalState.invokerElement.offset().top}, 200, "linear");
}
if(
// modal position + modal height is greater than or equal to the height of the embedContent so we need to resize the
// embedContent (make it taller)
((modalState.invokerElement.offset().top + modalState.contentElement.height()) >= $embedContent.height()) ||
// modal position + modal height is less than or equal to the height of the embedContent AND the current height of the
// embedContent is greater than or equal to the size of the embedContent height when the modal was originally shown
(((modalState.invokerElement.offset().top + modalState.contentElement.height()) <= $embedContent.height()) &&
($embedContent.height() > modalState.initialContentContainerHeight))
){
var newEmbedContentHeight = modalState.invokerElement.offset().top + modalState.contentElement.height() + 30;
$embedContent.height(newEmbedContentHeight);
parent.postMessage({method:"returnWindowSize", content:newEmbedContentHeight}, '*');
}
}
</script>
</head>
<body>
<div id="embedContent" class="container">
<div class="row" style="height:200px;margin-top:100px;">
<div class="col text-center">
<button id="btn1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
<div class="row" style="height:200px;">
<div class="col text-center">
<button id="btn2" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
<div class="row" style="height:200px;">
<div class="col text-center">
<button id="btn3" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
<div class="row" style="height:200px;">
<div class="col text-center">
<button id="btn3" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
<div class="row" style="height:200px;">
<div class="col text-center">
<button id="btn3" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
<div class="row" style="height:200px;">
<div class="col text-center">
<button id="btn3" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true" data-focus="false" style="overflow-y:hidden;">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:500px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
最终的解决方案是我们需要通过在 <head></head> 中包含以下 css 来强制硬件加速子文档(iframe 中的元素(在本例中为 frameable.html)):
<style>
body{
transform: translate3d(0,0,0);
}
</style>
但是我无法解释为什么这可以解决问题，或者为什么 ios12 需要它而不是 ios11。如果其他人可以阐明该主题，我相信这会对以后的其他人有所帮助。
关于javascript - 隐藏在内容后面的 iOS 12 中的 Bootstrap 模态 Iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57513308/