Open Bug 1877751 Opened 8 months ago Updated 7 months ago

Offscreen canvas rendering not propagated from web worker when used as CSS background image with -moz-element()

Categories

(Core :: Graphics: Canvas2D, defect)

Product:
Core
Component:
Graphics: Canvas2D
Version:
Firefox 122
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: will, Unassigned, NeedInfo)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:122.0) Gecko/20100101 Firefox/122.0

Steps to reproduce:

I was experimenting with offscreen rendering using 'transferControlToOffscreen' to transfer a main-thread canvas to an offscreen canvas present in the worker and came upon the following: https://jsfiddle.net/s1gtrap/wbxokjtz/

Actual results:

Rendering does propagate nicely to the actual canvas, but using the canvas as a CSS background using the -moz-element(#canvas) function doesn't. In fact the background only seems to be updated when other things force it to be re-rendered, like switching tabs or resizing the window (not by dragging though).

Expected results:

The background should be changed in sync with the actual canvas.

Forgot to mention this is true for FF 122 on macOS as well as Linux, and I suppose something like this is the expected result: https://jsfiddle.net/s1gtrap/zpfovdq9/

When rendered from the main-thread changes show up as they are being made w/o issue.

Moving this over to a potential component as I am not sure where this would fit best. If this is not the right, please change to a more suitable one.
Thanks!

Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core

Seems more of a Canvas issue than CSS, moving to Graphics.

Component: CSS Parsing and Computation → Graphics: Canvas2D

Offscreen canvas code paths need a InvalidateRenderingObservers call somewhere maybe?

Severity: -- → S3
Flags: needinfo?(aosmond)

I'm using Houdini Painting API polyfill from ChromeLabs (https://github.com/GoogleChromeLabs/css-paint-polyfill) which relies on -moz-element(), and a similar thing happens with that use case as well. The polyfill doesn't use a worker AFAICT.

In order to get a static background (drawn while the page is loading) to show, I have to modify CSS properties after some delay to trigger a re-render. Moving the cursor over the element updates the background as well.

Here's an example without the worker: https://codepen.io/jsnkuhn/pen/NWgBBdO?editors=0100

You need to log in before you can comment on or make changes to this bug.