Problem: on iOS, a page is nested by iframe. An element displayed at the bottom of the page in the content page cannot be displayed. The position of this element is fixed.
Reason: because the height of Safari's iframe under iOS will adapt to the content of the page, resulting in the height of iframe is too high (that is, the height of iframe > the height of the screen). The position of this element is fixed and displayed outside the screen, which causes the position:fixed under iframe to be invalid,
Reproduce Bug
It's simple and rough, just code
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div>
<style>
iframe {
border: 1px solid #ccc;
width: 100%;
height: 300px;
}
</style>
<iframe frameborder="0" src="content.html"></iframe>
</div>
</body>
</html>The file name of the content page is content.html, and the code of the content page is as follows:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<script type="text/javascript">
var addcontent = function() {
document.body.appendChild(document.getElementById('test').cloneNode(true));
};
</script>
<button onclick="addcontent()">Add content</button>
<div id="test">
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
</div>
</body>
</htmlIt is quite simple to reproduce this problem. Open it with apple and click the Add content button. Although the height of IFrame is defined as 300, the height of IFrame will increase automatically.
Solution
Since the height of IFrame is determined by the height of the body of the content page, it is necessary to find a way to make the height of the body of the content page never exceed the height of the window.
Then move the content in the content page to an absolute positioning element, which is displayed as a full screen.
The corrected content page is as follows:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<style>
#content-wrapper {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
</style>
<script type="text/javascript">
var addcontent = function() {
document.getElementById('content-wrapper').appendChild(document.getElementById('test').cloneNode(true));
};
</script>
<div id="content-wrapper">
<button onclick="addcontent()">Add content</button>
<div id="test">
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
</div>
</div>
</body>
</html>Note: it is not a common practice to use IFrame on the mobile side.