I can't reproduce this in the snippet editor, but when my app is served from a server, it has the following problem on mac and mobile safari (not chrome): The app does some async setup, then removes an overlay, indicating the app is ready to use. This works the first time.
However, after a soft reload on both mobile and mac safari, the overlay becomes transparent but stays in the DOM (I can see it on inspection), blocking the elements underneath it which need to get mouse input.
Can somebody help me understand why this might happen on mac/mobile safari, why it doesn't happen the first time after a hard reload, but happens reliably on a regular reload, and what I should do to fix? It works here in the snippet editor, but I think each run is more like a hard reload.
function pause(ms=1000) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
pause().then(word => {
overlay.style.transition = '0.8s';
overlay.style.opacity = 0;
console.log(`${overlay}`);
overlay.addEventListener("transitionend", () => {
console.log(`got here, removing ${overlay}`)
overlay.remove()
});
});
const el = document.getElementById('test');
el.addEventListener("click", () => console.log('clicked') );#overlay {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
opacity: .80;
}<div id="overlay">
<div class="spinner"></div>
<br/> loading...
</div>
<div>
<div>
<h1 id="test">click me</h1>
</div>
</div>