OffscreenCanvas rendered with ImageData on a Web Worker does not resize properly.

[Arhan Chaudhary]

Created attachment 469478 [details]
The code snippet running on my machine.

I've ran into a particular canvas rendering issue that only happens on Safari. Following is the code snippet that produces the behavior demonstrated in the attached video.

index.html

<canvas style="border: 15px solid red; width: 50vw;" width="512" height="256"></canvas>
<script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.transferControlToOffscreen();
    const worker = new Worker('worker.js');
    worker.postMessage(ctx, [ctx]);
    self.onresize = () => {
        worker.postMessage(undefined);
    }
</script>


worker.js

self.onmessage = (e) => {
  let ctx = e.data.getContext("2d");
  self.onmessage = () => {
    const imageData = ctx.createImageData(512, 256);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      data[i] = 0;
      data[i + 1] = 0;
      data[i + 2] = 0;
      data[i + 3] = 255;
    }
    for (let i = 50; i < 120; i++) {
      for (let j = 50; j < 120; j++) {
        const index = (i + j * imageData.width) * 4;
        data[index] = 255;
        data[index + 1] = 0;
        data[index + 2] = 0;
        data[index + 3] = 255;
      }
    }
    ctx.putImageData(imageData, 0, 0);
  };
};

Some of my preliminary questions include: Why does the canvas image sometimes escape its content box and "move" to the border box? Why does the canvas image not scale with the rest of the content box? Does some sort of inner buffer data race condition cause the flashing? Could the culprit be the explicit width and height in ctx.createImageData(512, 256)?

From my testing thus far, no similar derivative of this code causes the bug to occur. It only seems to happen under the following set of circumstances:
1. you are using safari
2. you are using a web worker to render an offscreen canvas
3. you are constantly updating the screen
4. you are rendering the canvas with ImageData
5. you are actively resizing the screen

[Radar WebKit Bug Importer]

<rdar://problem/121721620>

[Arhan Chaudhary]

This seems to have been fixed in Safari v17.4.1