Background blur not showing with picom and blurred styles

[KiranWells]

I recently installed this onto Firefox Developer Edition, and my background is not showing through the window. All other blurs seem to work fine, but the main window will not be transparent. I have picom and blur enabled, and I have changed all the required settings in about:config. In addition, I even tried going into the remote debugger, and using:

* {
  background-color: transparent !important;
}

the main window remains solid.

What appears to be happening is that a gray-blue background is being shown, even with everything else transparent. This is visible behind the navbar and in the margins around #browser if I increase them.

The html:body element is visibly changed when I set the background to red or something similar, but even when that is set to transparent, the html#main-window element behind it is not shown (if it has a color of red, the color remains gray-blue).

Thanks for the help!

[Mange]

I have the same issue with Developer Edition. Everything was fine, then I reinstalled my OS on a new drive, rsynced my ~, and started again. After installing Firefox the background was no longer blurred (while the layout is still clearly blurredfox).

I've tried reinstalling blurredfox many times, with restarts and different themes selected before and after installing. Still nothing.

I was unsure if the problem was caused by a recent update to Firefox (I had not updated my old install in a few weeks), or something in the new system - so I was waiting to report it until I would have gotten more time at it.

That you also have this problem now adds credence to it being a Firefox update causing this IMO.

[KiranWells]

Update: Developer is still not working, but normal Firefox is. However, I found a (somewhat hacky) workaround to get the blur effect. If you set the #browser background to your wallpaper, and set the other elements to blur, it should work.

#browser {
  margin-top: -100px;
  padding-top: 100px; /* to put the image under the toolbar */
  background-image: url(file:///home/user/wallpapers/wallpaper.jpg);
  background-size: cover;
  background-position: center;
}

#browser>* {
  backdrop-filter: blur(var(--bf-backdrop-blur));
}

(Just FYI this image includes some other changes that I added to make more things consistent, and the new tab page is nightTab using that same strategy.)

[PoorPocketsMcNewHold]

Pretty strange, as the whole blurring is done by the compositor in itself. As recent picom updates support transparent windows (And blurring after merging the dual-kawase blur)
The main issue would be that Firefox doesn't show transparent then really not able to call for the blur effect.

[KiranWells]

Just to clarify; the issue does not seem to be picom at all. Transparent windows are working just as they should, as you can see in the screenshot of normal FIrefox. The problem is that Developer has a solid background that I cannot remove.

[vladimirlucifer]

How should i go about doing this? Should I just add the snippet of code? Or should i find it? I can't find it on the remote debugger, can anyone help? Thanks in advance.

Update: So, i was able to implement Transparency using the snippet, but no blur has been applied (i have picom with blur applied). Any sugestions?

[KiranWells]

Which snippet do you mean? I was not aware of a fix for this.

[jstawik]

Can confirm - using picom and regular firefox - upon rolling back to FF84 transparency works. It breaks in FF85. The workaround @KiranWells suggested is just putting the image in the background of the browser - it won't match up with your actual wallpaper, won't show the windows underneath and most importantly - picom won't apply it's blur. It's as if from the compositor point of view this area wasn't transparent at all.
I have tested this earlier with a more minimal snippet:

html, html > *, html > * > *, .browser-toolbar  {
  border: none !important;
  -moz-appearance: none !important;
  box-shadow: none !important;
  background: transparent!important;
}

.titlebar-color, .browser-toolbar, findbar {
  background: rgba(22,22,22, 0.75)!important;  
}

.tab-line {
  background: none !important;
}

.tab-background[selected=true] {
  background: #402222 !important;
  border-radius: 6px;
  border: none !important;
}

tab[selected="true"]::after, .tabbrowser-tab[beforeselected-visible]::after {
    opacity: 0.75 !important;
}

/*   rgba(49, 54, 59, 0.75) */

and it is also broken by FF85.
Screenshots for comparison:
FF84 https://imgur.com/a/GucXS6u
FF85 - https://i.imgur.com/SBHTLnE.png
while the theme in the screenshots is not blurredfox, it showcases the more minimal scenario for recreating this issue.

[xbjfk]

It also doesn't have any transparency in Wayfire for me.

[shaansubbaiah]

Appears to be fixed in FF87

Also reported in #52 #54

[Mange]

Does not work for me in Developer edition 87.0b3.

[EDIT]: Also not in Developer 88.0b2.

[shaansubbaiah]

Started working for me today on FF 87.0 running with picom, awesomewm, Manjaro

[Mange]

I suspect they rolled back some change in the stable version in that case, which also would explain why it remains broken in the Developer edition.

[Phundrak]

I was wondering why people were reporting the theme as working again when it didn’t work for me, the answer is simple: apparently it doesn’t work with privacy.resistFingerprinting set to true in about:config (reverting it back to false also fixed a time issue I had in Firefox). Maybe this could be added to a list of known issues? (although I’m pretty sure this would be a wontfix)
So yep, can confirm this works again in Firefox 87 stable

[eromatiya]

#60

[xbjfk]

Does not work for me on 87.0, privacy.resistFingerprinting set to false on wayfire.