HTML canvas disappears in Chrome after browser window/tab becomes inactive

[thuatnv]

My KonvaJS or Canvas element works perfectly fine except when paint in Chrome 125.0.6422.61 on a Mac running MacOS 14.4.1, where the canvas content gets completely wiped out when I

1. open tab multiple in chrome
2. minimize Chrome.
3. switch to a different tab
4. swipe to another screen

****Update info Issue from chrome: https://issues.chromium.org/issues/341803761 ****
Pls plus +1 on this issue. :D

[astronomyf]

+1 having the same issue here. Running on Chronium 125.0.6422.60 and MacOS 14.4.1.

Edit: Seems to be an issue related to Chrome and experimental features: https://stackoverflow.com/questions/71201403/html-canvas-disappears-in-chrome-after-browser-window-tab-becomes-inactive

I have the flag off so I'm not sure this explains why is happening to me - but there seems to be a workaround at least

[thuatnv]

+1 having the same issue here. Running on Chronium 125.0.6422.60 and MacOS 14.4.1.

Edit: Seems to be an issue related to Chrome and experimental features: https://stackoverflow.com/questions/71201403/html-canvas-disappears-in-chrome-after-browser-window-tab-becomes-inactive

I have the flag off so I'm not sure this explains why is happening to me - but there seems to be a workaround at least

Yep. I found this. But only outside of incognito mode. I'd appreciate it if the Konva Team could provide a solution that functions in both regular and incognito modes.

Update function to handle multiple canvas elements:

const canvases = document.querySelectorAll("canvas");
      canvases.forEach((canvas) => {
      const ctx = canvas.getContext("2d");
      let bmp;

      canvas.addEventListener("visibilitychange", async (evt) => {
        if (evt.target.visibilityState === "hidden") {
          bmp = await createImageBitmap(canvas);
        } else {
          ctx.globalCompositeOperation = "copy";
          ctx.drawImage(bmp, 0, 0);
          ctx.globalCompositeOperation = "source-over";
        }
      });
    });

Function works for me, but drawings lose their coordinates and proportions when I zoom in or out.

[lavrton]

Just updated chrome to this version on macOS and I can't reproduce the issue. Can you help me with that?

[thuatnv]

Just updated chrome to this version on macOS and I can't reproduce the issue. Can you help me with that?

To reproduce the issue, follow these steps:

Step 1: Open multiple Chrome tabs (more than 10) and load the KonvaJS demo in new tab.
Step 2: Switch to a different tab and then return to the KonvaJS tab after 30 seconds.

[alessiocancian]

Same problem with Chrome 124.0.6367.209 and MacOS 14.3.1

EDIT: I updated Chrome to 125.0.6422.61 and I can't reproduce it anymore

[chucklazaza]

Same problem with Chrome 124.0.6367.208 and MacOS Sonoma 14.1

[lavrton]

I think I fixed that with [email protected]. But to be honest, I am still not sure if this is something that Konva must do.
The solution is simple - redraw layers when tab is active.
So I added that from Konva side a temporary solution, probably it will be better to remove it if Chrome resolves that issue.