El siguiente código, diseñado para ocultar temporalmente un mapa del cielo, contenido en un lienzo que se superpone a la esfera de un reloj, funciona bien en Firefox, pero no en Chrome:

 private skyClick = (_event: MouseEvent) => { this.hideSkyMap = true; this.skyCanvas.style.pointerEvents = 'none'; this.skyCanvas.style.opacity = '0'; this.hideSkyMapTimer = setTimeout(() => { this.hideSkyMap = false; this.skyCanvas.style.pointerEvents = 'all'; this.skyCanvas.style.opacity = '1'; }, 60000); }

Lo extraño es que si entro en la consola web de Chrome, simplemente resaltar el elemento del lienzo hace que vuelva a aparecer. Parece ser que el lienzo no se vuelve a pintar automáticamente después de que la opacidad se establece en 1, y necesita algún tipo de empujón para obligarlo a aparecer nuevamente.

Lo que es aún más extraño es que si restauro la opacidad a 0,99 en lugar de 1, el lienzo también vuelve a aparecer correctamente.

¿Alguien tiene una mejor idea sobre cómo solucionar esto, además de conformarse con una opacidad algo menor que la total cuando restaure el lienzo?

No estoy usando mostrar ninguno/bloquear, que sería más sencillo, porque quiero animar la transición para que el mapa del cielo se desvanezca y desaparezca.

ACTUALIZAR:

Por extraño que parezca, después de agregar la animación que quería tener, usando transition: opacity 1s , eso también solucionó el problema. La animación del cambio de opacidad parece ser una buena manera de forzar el repintado del lienzo.

Todavía tengo curiosidad por saber si hay otra solución para este error, pero la respuesta no es tan importante ahora.