No puedo reproducir esto en el editor de fragmentos, pero cuando mi aplicación se sirve desde un servidor, tiene el siguiente problema en mac y safari móvil (no en Chrome): la aplicación realiza una configuración asíncrona, luego elimina una superposición, lo que indica el la aplicación está lista para usar. Esto funciona la primera vez.

Sin embargo, después de una recarga suave tanto en el móvil como en Mac Safari, la superposición se vuelve transparente pero permanece en el DOM (puedo verlo al inspeccionarlo), bloqueando los elementos debajo que necesitan la entrada del mouse.

¿Puede alguien ayudarme a entender por qué esto podría suceder en mac/móvil safari, por qué no sucede la primera vez después de una recarga dura, pero sucede de manera confiable en una recarga regular y qué debo hacer para solucionarlo? Funciona aquí en el editor de fragmentos, pero creo que cada ejecución es más como una recarga dura.

 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>