Encountering an issue with Bootstrap 4.1 modals in Safari on iOS 12 when displayed within iframes, unlike other browsers including Safari on iOS 11. The problem appears to be specific to iOS 12.
A minimal example illustrating the problem has been created. The first two buttons work fine, but you can observe the issue with the last four as you go down, with the final one completely disappearing when trying to scroll or focus on an element inside the modal (refer to the screenshots below):
https://i.sstatic.net/KWUzJ.jpg https://i.sstatic.net/uL36h.jpg https://i.sstatic.net/G3tNu.jpg
Note that we are handling this functionality in a somewhat unconventional way by adjusting the iframe's height after loading through message passing between parent and child using a message event handler and postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage. I suspect something went wrong here (only noticed on iOS devices running version 12).
Edit
Recent findings reveal that this issue extends beyond Safari on iOS 12 to Chrome as well.
The code snippet below is extracted from the previous minimal example link:
Parent (/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>
<...