I have an application which shows/hides content dinamically, and I'm facing a very weird issue in iOS 11 and xCode 9, when using full screen for my application (the new viewport-fit=cover meta). The problem is that when there is an scrollable element, and a click is made somewhere there is a click event listener attached, the scroll elements falls down the safe-inset size, remaining in a negative position and breaking the application.
There is an image with the issue:
On one hand, if the click is made in a zone without an event listener (for instance, the grey or soft green area), it doesn't break the view. On the other hand, it doesn't matter the logic inside the listener, even if the listener doesn't do anything (blue header) or if it has prevent code (preventDefault(); stopPropagation(); stopImmediatePropagation()) it breaks the view.
For reproduce this issue, just need a new cordova project, with overscroll disabled (<preference name="DisallowOverscroll" value="true" />) and with the following index.html:
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
<title>iostest</title>
<style>
header {
background-color: blue;
color: white;
height: 80px;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 2;
}
.container {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
.page-content {
background-color: yellowgreen;
box-sizing: border-box;
padding-top: 80px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
}
.big-paragraph {
background: grey;
height: 1000px;
margin: 0 50px;
}
.abs-elem, .fix-elem {
background-color: red;
position:absolute;
bottom: 0;
left: 0;
width: 50px;
height: 50px;
}
.fix-elem {
background-color: green;
right: 0;
left: initial;
}
</style>
</head>
<body>
<header></header>
<div class="container">
<div class="page-content" style="display: none">
<p class="big-paragraph">Big paragraph</p>
</div>
</div>
<div class="abs-elem"></div>
<div class="fix-elem"></div>
<script>
let p = document.querySelector('p');
let page = document.querySelector('.page-content');
document.querySelector('header').addEventListener('click', function() {});
document.querySelector('.abs-elem').addEventListener('click', function(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.stopImmediatePropagation();
});
document.querySelector('.fix-elem').addEventListener('click', function() {
page.style.display = 'none';
page.offsetWidth;
page.style.display = 'block';
});
setTimeout( () => {
document.querySelector('.page-content').style.display = 'block';
}, 200);
</script>
</body>
</html>I have put three clickable zones, the header (just a listener), the red square (left down corner, with prevent code) and the green square (right down corner, who hides/shows the content, for showing that after this everything goes to their place again).
Therefore, I've published this issue in cordova jira
Update: I've opened a bug report with apple, as it seems to be a problem with UIWebView component, not something related with web code
Update 2: It has been marked as duplicate at apple bugreporting tool, so it seems to be an know issue in apple webview. I guess I'm not going to have any answer by apple as my report is duplicate, just expecting it to be fixed in future releases.
Update 3 (17/10/2017): Still present in iOS 11.0.3
Update 4 (11/01/2018): It seems to be fixed in last iOS (from 11.2) / xCode versions. As expected, no answer by Apple in our bug report, but finally it seems to be fixed :)