2004797 - OffscreenCanvas flickers with calling getContext('2d')

Status: ASSIGNED

(Core :: Graphics: Canvas2D, defect)

Description

[Nathan]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Steps to reproduce:

• create a canvas element
• pass canvas element to worker via canvas.transferControlToOffscreen()
• in worker, call getContext('2d') on some interval
• !! note the canvas briefly flashes coinciding with the getContext('2d') call

Trivial repro case is here: https://www.nate.surf/firefox-offscreen-canvas-bug/

• worker.js https://www.nate.surf/firefox-offscreen-canvas-bug/worker.js
• main.js https://www.nate.surf/firefox-offscreen-canvas-bug/main.js

Actual results:

canvas flickers or flashes on each getContext('2d') call.

Expected results:

canvas should not flicker.

Comment 1

[Nathan]

Please note, this flicker blocks us from being able to depend on Firefox when rendering data-dense visualizations. We need to access the canvas' context to calculate pointer intersections, for example, which creates a significant flashing or strobing effect. At the moment we cannot recommend Firefox to some of our users because of this issue.

Possibly related issues:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1944678
• https://bugzilla.mozilla.org/show_bug.cgi?id=1853207

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: Canvas2D' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Nathan]

Attachment: WIP: Bug 2004797 - Only call UpdateContext when creating a new context in OffscreenCanvas

When getContext() is called multiple times on an OffscreenCanvas transferred via
transferControlToOffscreen(), it was creating a new ImageContainer each time,
causing the canvas to flicker. This fix only calls UpdateContext() when a context
is newly created, not when returning an existing context.