Image flickering with animation + image-background URL in a CSS root var()
Categories
(Core :: CSS Transitions and Animations, 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)
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.
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.
Comment 4•4 years ago
|
||
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.
Comment 5•4 years ago
|
||
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!
Comment 6•4 years ago
|
||
Thanks for finding the regression range! Sure, will take a look.
Updated•4 years ago
|
Comment 7•4 years ago
|
||
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.
Comment 8•4 years ago
|
||
(You can see the network requests appearing in the DevTools network panel, too, if you have that open while performing the STR.)
Comment 9•2 years ago
|
||
I can't repro this anymore on current nightly. Can you confirm?
Comment 10•2 years ago
|
||
I can still reproduce in a current Nightly
Comment 11•2 years ago
|
||
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.)
Comment 12•2 years ago
|
||
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)
Comment 13•2 years ago
|
||
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.)
Comment 14•2 years ago
|
||
(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.)
Description
•