1748663 - Animated background image is being shown in devtools over and over if set via a CSS variable

Status: RESOLVED DUPLICATE of bug 1747494

(DevTools :: Netmonitor, defect)

Description

[warningnonpotablewater]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0

Steps to reproduce:

TLDR: go to https://web.bruh.ltd/0022-checkerboard/ and open the "Network" tab of the dev tools.

1. Create an empty HTML page.
2. Set the page background to an image using a CSS variable, for example:

body {
    --background: #007F7F url("bricks.png");
    background: var(--background);
}

3. Animate the background using keyframes by changing the background-position over time.
4. Open the "Network" tab of the dev tools.

Actual results:

The image is being downloaded over and over again.

Expected results:

The image should've been downloaded only once.

Comment 1

[warningnonpotablewater]

Apart from Firefox 95, I've also been able to reproduce the bug on Firefox Nightly 2022-01-05.

Comment 2

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

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

Comment 3

[Emilio Cobos Álvarez (:emilio)]

It's hitting the cache though, right? There's no data actually downloaded afacit. That's sort of expected, I believe, since CSS variables do create a new CSS value each time they are computed.

Comment 4

[warningnonpotablewater]

It does hit the cache but floods the devtools, which is not only inconvenient but also can make the devtools unusable if left for enough time.

Comment 5

[warningnonpotablewater]

By the way, Chromium doesn't seem to be affected by this bug.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Yeah, so I guess we're notifying devtools even when hitting the image cache which is unfortunate. This was changed in bug 1722759.

Comment 7

[Sean Feng [:sefeng]]

Yeah sorry, we plan to make it only display it once.