Blur not working with Firefox/Waterfox/Librewolf/...

[usagi-flow]

• Swayfx Version: sway version 0.3.2

• Debug Log: Link to log

• Configuration File: Link to file (I took the liberty to remove some commented lines, other than that, the configuration file is unchanged.)

• Description:

The blur effect does not apply to the transparent part of my browser. It works flawlessly for waybar and for my terminal (wezterm).

Interestingly, I can get the blur to work in the browser, but only after switching between light/dark mode using xdg-desktop-portal's color-scheme. Even then, that will only work if the browser is not floating, and the blur will disappear if I switch workspaces.

I could confirm the issue with all 3 browsers, which I all run in flatpak. I also ran my terminal in flatpak to rule out flatpak as a source of issues.

• Steps to reproduce:
  • Enable blur in the configuration.
  • Enable a transparent title bar in FF/WF/LW:
  • Enable native title bars if not done yet:
    • Rightclick somewhere next to the tabs -> Customize toolbar.
    • In the bottom left, enable "Title bar".
  • Open about:config and enable the option toolkit.legacyUserProfileCustomizations.stylesheets if it wasn't enabled yet.
  • Find out the profile directory by going into the Menu -> Help -> More troubleshooting information: The table contains an entry "Profile Directory".
  • In the profile directory, create a directory chrome, and in that directory, create a file userChrome.css
    • E.g. ~/.mozilla/firefox/xzxzyxzy.default-default/chrome/userChrome.css
    • E.g. ~/.librewolf/xzxzyxzy.default-default/chrome/userChrome.css
    • Or, if using Flatpak: E.g. ~/.var/app/io.gitlab.librewolf-community/.librewolf/xzxzyxzy.default-default/chrome/userChrome.css
  • In userChrome.css, enter the following content:

    #main-window {
      background-color: transparent !important;
    }
    #titlebar {
      background-color: transparent !important;
    }

Now, when (re)starting the browser, it should have a transparent tab bar background:

If you ensure the window is not floating, and then switch between light/dark mode as follows: gsettings set org.gnome.desktop.interface color-scheme prefer-dark gsettings set org.gnome.desktop.interface color-scheme prefer-light

...then the blur comes, until you switch workspaces or set the window floating:

[ErikReider]

Sounds most likely like Firefox isn't setting its opaque region when you're changing the background opacity.

We only render blur behind the window regions that the application reports are translucent. I'll investigate tomorrow but I'm pretty sure that there's nothing that can be done on our side

[usagi-flow]

Thanks for clarifying @ErikReider ! I can't exclude the fact that Firefox isn't reporting something correctly indeed.

That said, isn't there a way to force the blur on certain windows?

I know that as soon as I set the window slightly transparent, the blur works flawlessly: for_window [app_id="firefox/waterfox/librewolf"] opacity 0.9.

But that's obviously not a good workaround, as it makes the whole window and its contents slightly transparent (with respective performance consequences, I suppose).

Maybe something like: for_window [app_id="firefox/waterfox/librewolf"] blur_force true ?

[ErikReider]

(with respective performance consequences, I suppose).

The performance would be identical to a force blur option in these cases anyway.

We currently don't have an option that forces blur. Wouldn't setting the opacity to something like 0.99 work?

[ErikReider]

Closing as it's a Firefox "bug"

If you have any other questions, don't be afraid to ask :)