1736906 - Color flickering when changing the wave color at https://wavier.art/

Status: NEW

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[Itiel]

Attachment: Screencast

Tested on latest Nightly on Windows 10, STR:

1. Open https://wavier.art/
2. Click the "Set Wave color" color picker button
3. Drag the mouse around the color pallete

AR:
The color flickers

ER:
No flickering

Note that this doesn't happen on Chrome.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

I believe this is because we're decoding the svg asynchronously.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (reduced)

Here's a reduced testcase.

STR:

1. Load this testcase. (If you've previously loaded it, be sure to shift-reload to be sure you aren't benefiting from any image caching, which can hide this bug.)
2. Click the button in the testcase.
3. Click it again, if you want.

ACTUAL RESULTS:
Each time I click the button, the lime square briefly flashes red -- i.e. the change to background-image makes the image briefly disappear.

EXPECTED RESULTS:
Given that we don't have to hit the network to get the updated background-image, it seems like the update should be handled synchronously/atomically (or at least, that should be the user perception).

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Attachment: WIP: Bug 1736906 - WIP: Make SVG-as-image loads more sync.

I thought something like this could make it, but that's not even enough,
because data: loads are still async per spec.

So I believe Firefox is right here, ultimately, and this is a website
bug, sorta.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Attachment: Stack of load event after patch in comment 3

data: uri loads are still async per spec, so unless we special-case them to be synchronous (only for images perhaps?) which we probably don't want to do, I think the expectation is incorrect.

Fixing the page should be sorta straight-forward (by ensuring that the image loads before updating the background-image).

Alternatively, we could try to do something like we do on nsImageFrame to avoid flickering (drawing the "old" background image while the new one is loading). Not sure how easy would that be to do since the old style is basically gone, and there are arbitrarily many background images... Maybe with retained display lists it's not super-hard?