Visual glitches appear when using filter: blur() on a background-image
Categories
(Core :: Web Painting, defect, P3)
Tracking
()
People
(Reporter: bonjour, Unassigned)
References
Details
Attachments
(1 file)
|
1.63 MB,
video/mp4
|
Details |
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:100.0) Gecko/20100101 Firefox/100.0
Steps to reproduce:
When using a background-image with a filter: blur() on it, black glitches appear on the background whenever other elements move (hover animations, transforms, box-shadows, text changes...). They also appear all around the window when you open the dev tools.
You can see it here (add a quick link to hover on it): https://online.bonjourr.fr/
I noticed that the color came from the body. If the body's background-color is red, then the glitches will be red.
I don't understand when it happens exactly (sometimes it just doesn't), but I've seen it happen on multiple computers & Firefox instances for a long time. It also seems to happen a lot more when the blur is harder to process (when the background-image is very high resolution, and/or if the filter: blur() is intense).
Actual results:
Black lines appear randomly on the blurry background.
Expected results:
Glitches on the blurry background should not appear.
|
||
Comment 2•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Web Painting' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 3•3 years ago
|
||
Hmm, I tried to reproduce on a mac on https://online.bonjourr.fr/ after adding quick links and hovering them, resizing browser, opening devtools but it looked fine to me. Have you tried on a fresh profile or safe mode? Or a different computer?
Thank you for your response :) I have tried on a new profile and it also happens.
I've seen it on both my computers (an M1 Mac and a 2012 MacBook Pro). One of our users also reported it. The weirdest thing is that it really feels random. It happened on my older Mac the other day, and now with the exact same configuration and settings, I can't seem to trigger it.
|
|
||
Comment 5•3 years ago
|
||
I think I've just now reproduced a somewhat subtler glitch then in the video.
Oh, nice! Yeah it can be more subtle, the ones I got yesterday were pretty harsh
|
|
||
Comment 7•3 years ago
|
||
The severity field is not set for this bug.
:miko, could you have a look please?
For more information, please visit auto_nag documentation.
|
|
||
Comment 8•2 years ago
|
||
Bug 1752919 just landed on Firefox Nightly, and I think it's possible that might affect this bug. A new version of Firefox Nightly will be available later today with that fix. Would you mind downloading and testing? You can find it at https://www.mozilla.org/firefox/channel/desktop/
Sadly I'm still seeing the bug in Nightly 102.0a1
|
|
||
Comment 10•2 years ago
|
||
The fix just landed, it's not in the latest available nightly yet. Later today a new version of nightly will be released with the that patch.
|
Reporter | |
Comment 11•2 years ago
|
||
Alright! Sorry. Will report later then :)
|
|
||
Comment 12•2 years ago
|
||
Okay, the latest nightly should have the fix I mentioned if you want to test now. Sorry for the confusion.
|
|
Reporter | |
Comment 13•2 years ago
|
||
No worries! I still see no changes though in the updated version of Nightly
|
||
Updated•2 years ago
|
|
||
Comment 14•2 years ago
|
||
We have been affected by this bug too. I have disabled the blur effect in production for Firefox, but you can see the problem by adding blur(3px) to .ri-grid ul in the inspector: https://standard.tv
The bug appears to have been introduced with Firefox 99. Here is a video of our website running in 98.0: https://www.dropbox.com/s/h20cmarxfnaoalc/ff98.mov?dl=0
And here is the same in 99.0: https://www.dropbox.com/s/een78aut134ivol/ff99.mov?dl=0
Description
•