Interesting (that is, annoying) Chrome problem with hiding/showing a canvas using opacity

Question

The following code, designed to temporarily hide a sky map, contained in a canvas that overlays a clock face, works fine on Firefox, but not on 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);
  }

What's weird is that if I go into the Chrome web console, merely highlighting the canvas element causes it to reappear. It seems to be a matter that the canvas isn't automatically being repainted after the opacity is set to 1, and it needs a nudge of some sort to force it to appear again.

What's even stranger is that if I restore the opacity to 0.99 rather than 1, the canvas properly reappears as well.

Anyone have a better idea on how to fix this, other than settling for somewhat less than full opacity when I restore the canvas?

I'm not using display none/block, which would be more straightforward, because I want to animate the transition so the sky map fades in and out.

UPDATE:

Oddly enough, after I added the animation I wanted to have, using transition: opacity 1s, that also fixed the problem. The animation of the opacity change seems to be a good way to force the repainting of the canvas.

I'm still curious if there's another work-around for this bug, but the answer isn't as important now.

Answer 1

I had the same problem, and I set the will-change: opacity to resolve it.