Why solid instead of transparent and blurred?

[sameerasw]

Due to a limitation with CSS and browser transparency we have, making an overlay element blurry with backdrop-filter is problematic. You can inspect the below images for reference on what happens.

From my understanding, since the browser lacks a background and on some places it's completely transparent, It only tries to make the backdrop-blur with what's available and behind in the browser and then overlay it between the actual background and then front most element we are applying blur to. Because of this, sharp content like text and shapes will not get blurred and will be visible through the blur layer breaking the UI.

From hours of research, I found no solutions so far for this issue which is also the reason the same happens when you make the compact sidebar transparent and blurry int eh zen browser while the browser is already transparent. If you know a workaround, feel free to implement and share :)

A demo from GIMP of the same effect.

CleanShot.2025-05-13.at.9.56.27.mp4

[Jimm144]

This seems to be an issue in Gecko based browsers, we'll have to wait until Mozilla does something

[Jimm144]

the normal sidebar probably wouldn't work but can't static ones work?

[sameerasw]

not the whole website ,this is new tab which make all of it blurry. Can you make so there's only blur behind the youtube and github sidebar

that's the issue... we can't achieve backdrop-blur (blur behind) when the page itself already is transparent. because transparency mising with backdrop-filters going to cause the above issue...it can be avoided only if that part under the sidebar of the webpage had a background already which we do not...

[sameerasw]

the normal sidebar probably wouldn't work but can't static ones work?

Static? You mean the sidebars that are not overlays? they already should be transparent.

[Jimm144]

i mean the github and yt ones. you said they wouldnt work

[sameerasw]

i mean the github and yt ones. you said they wouldnt work

they will work if you manually add css but they won't be usable because of this bug... So I did not add css to make them transparent since that's gonna break usability which I wanted to keep to a minimum.

#62 (comment)