Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

57
Vistas
Overlay blocks input after soft reload in safari

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>

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.