Background blur glitch on Firefox

victrme / Bonjourr

Minimalist & lightweight startpage inspired by iOS

https://bonjourr.fr

GNU General Public License v3.0

1.01k stars 116 forks source link

Background blur glitch on Firefox #111

Open Avakining opened 2 years ago

Avakining commented 2 years ago

Describe the bug Black gradients appear as the mouse moves around the icons

To Reproduce Steps to reproduce the behavior:

Open a new tab
Move mouse around the icons
Black gradient bars will appear around the background

Expected behavior No changes to the background as the mouse is moved

Screenshots

Device (please complete the following information):

OS: macOS 12.3.1
Browser: Firefox 100
Bonjourr: 1.13.0

morceaudebois commented 2 years ago

Does it look like this? We've been aware of this glitch for a long while but don't know what to do about it sadly. There's something wrong in the way Firefox handles blur and it seems pretty random in its occurrences.

https://user-images.githubusercontent.com/50768582/166979886-553eb84a-a83d-4f3c-8994-0c520b84f607.mov

Avakining commented 2 years ago

That's exactly it, yeah

morceaudebois commented 2 years ago

Just spent a bit of time trying to understand it better. Here's what we have for now:

the trigger seems to be any moving element (hover animations, changing box-shadows or transforms, changing texts...)
it seems to happen a lot more when the blur is harder to process, that is when the background is really high resolution and/or the filter: blur() property is very intense
the color of the glitch actually comes from the color of the body (if the body is red, the glitches will be red)

morceaudebois commented 2 years ago

I posted a bug repport on Bugzilla. I hope they'll be able to help because I'm pretty sure we can't do anything about it, especially since filter: blur() is the only way to create blurry backgrounds on Firefox.

morceaudebois commented 2 years ago

Appears to be fixed in the last versions of Firefox. Will reopen if it comes out again.