Open Bug 1685442 Opened 4 years ago Updated 2 years ago

Image flickering with animation + image-background URL in a CSS root var()

Categories

(Core :: CSS Transitions and Animations, defect)

Firefox 84
defect

Tracking

()

Tracking Status
firefox-esr78 --- wontfix
firefox84 --- wontfix
firefox85 --- fix-optional
firefox86 --- fix-optional

People

(Reporter: cawecoy, Unassigned)

References

(Regression)

Details

(Keywords: regression)

Attachments

(5 files)

Attached video Video demonstrating the bug (deleted) —

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0

Steps to reproduce:

While creating an infinite loop animation with an image moving horizontaly through CSS animation I realized the image is flickering sometimes when I move the mouse, specialy when I have two tabs of the same page and I move the mouse over one or another tab.

I use background-image and the bug ONLY occurs when I set the URL in a root var(). It occurs with transform, opacity and others way of CSS animations.

So it's probably a bug related to the CSS var() that has the same name through more than one tab.

Actual results:

The image used in animation is flickering

Expected results:

The image should not be flickering as in another browsers.

Attached file HTML/CSS to reproduce the bug (deleted) —
Attachment #9195781 - Attachment description: The image that will be used in the HTML-CSS for bug demonstration → The demo image for the next HTML/CSS to reproduce the bug
Attachment #9195782 - Attachment description: HTML CSS to reproduce the bug → HTML/CSS to reproduce the bug
Attachment #9195780 - Attachment description: Firefox bug image flickering.mp4 → Video demonstrating the bug

Curiously, the bug doesn't occur when opening the attached HTML file directly from the link generated by BugZilla. It only occurs when I open the HTML file from my local machine. So, try to download the HTML file and open it in order to reproduce the bug.

Reproduced the issue on all latest Firefox versions on Windows 10 x64. This happens with both Webrender enabled and disabled as well. Interestingly, if you restart Firefox and the tabs with the files opened from local machine are still opened, the issue no longer occurs on my side.
If I close the tabs and drag&drop the html file again, it will happen once again.

Severity: -- → S3
Status: UNCONFIRMED → NEW
Component: Untriaged → CSS Transitions and Animations
Ever confirmed: true
Product: Firefox → Core

Seems to be an old regression:
Pushlog: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=476293c6700fb45da40b8096184211432a89be57&tochange=de51545099a617602be187d1c0f68ff2a87d6fb2

Bisected further manually and found as a regressor Bug 1525134, tested last release with and without the patches landed from that bug fix and can confirm it is not reproducible before the patch got landed.
Hey Emilio, although this is a pretty old regression, please take a look at it when you have the time. Thank you!

Has Regression Range: --- → yes
Has STR: --- → yes
Flags: needinfo?(emilio)
Keywords: regression
Regressed by: 1525134

Thanks for finding the regression range! Sure, will take a look.

Captured a profile of this: https://share.firefox.dev/3bsntG3
(I had fission.autostart set to true, which made this easier to repro, at least in my case. Aside from that, I was using a fresh Firefox user-profile.)

Looks like there's an actual network request (for the page's image) with each tab-title hover action that I do; and we're blank while we're waiting on that network request to complete.

(You can see the network requests appearing in the DevTools network panel, too, if you have that open while performing the STR.)

I can't repro this anymore on current nightly. Can you confirm?

Flags: needinfo?(emilio) → needinfo?(cawecoy)
Attached video Nightly_2022-07-18.webm (deleted) —

I can still reproduce in a current Nightly

I can still reproduce too, FWIW, in a fresh profile on Linux nightly. (Note that you have to be using a locally-saved copy of the testcase, and you have to have that testcase open in two tabs.)

Flags: needinfo?(cawecoy)

It also repros if you just switch back and forth between the two tabs.

Here's a profile I captured in up-to-date Nightly (in case the one from comment 7 is obsolete at this point): https://share.firefox.dev/3Ogbuvn

  • At around t=3s and t=7s, I trigger the bug by hovering the background tab.
  • At around t=13s and a few times after that, I trigger the bug by switching tabs (using Ctrl+Tab key combo I think)

Also: if you simply load the (locally-saved) testcase in two separate Firefox windows, then we flicker/repaint both windows forever. Here's a screencast showing that. (I start out with just one window loading the testcase; then I load it in a second testcase, and the flicker starts. Then I navigate away, and the flicker stops; and then I navigate back and it starts again.)

(I verified that the "two-window perma-flicker" issue in comment 13 has the same regression range from comment 5. In the first-bad Nightly, 2019-02-06, the [locally-saved] testcase doesn't even get as far as rendering any part of the image when I have it loaded it in two different Firefox windows; it just cycles forever, redownloading the image but never quite painting it.)

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

Attachment

General

Creator:
Created:
Updated:
Size: