OffscreenCanvas flickers during rendering

• Component: Canvas
• Status: NEW ---

[Ashley Gullen]

We make a web-based game engine Construct (www.construct.net). It supports running the engine both in the DOM with a standard HTML canvas, and in a Web Worker and rendering with OffscreenCanvas. Only in Safari and only when using OffscreenCanvas, sometimes the displayed canvas flickers. It looks like perhaps the canvas is not drawn for a single frame, causing its content to momentarily disappear and then reappear, which looks like a distracting flicker.

Repro URLs:
Using DOM canvas: https://downloads.scirra.com/labs/bugs/canvasflicker/dom/index.html
Using OffscreenCanvas: https://downloads.scirra.com/labs/bugs/canvasflicker/worker/index.html

Steps to reproduce:

1. Visit the first URL using DOM canvas
2. Wait for the content to load
3. Press the "Spin" button several times, waiting for the animation to finish each time
4. Repeat with second URL using OffscreenCanvas

Observed result:

In Safari and when using OffscreenCanvas only, sometimes the canvas momentarily disappears, resulting in a flicker. This can most obviously be seen in the "Flicker check" box at the top. This reproduces in Safari 17 on both macOS and iOS.

Expected result:

No flickering. This is how it appears in DOM mode in Safari, but also both modes always display correctly in Chrome and Firefox on Windows and Chrome on Android.

[Radar WebKit Bug Importer]

<rdar://problem/123626765>