2011074 - browser.tabs.allow_transparent_browser regression, namely that it no longer works

Status: RESOLVED DUPLICATE of bug 2011219

(Firefox :: Tabbed Browser, defect)

Description

[Ignacy Tomczyk]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:148.0) Gecko/20100101 Firefox/148.0

Steps to reproduce:

1. Enabled the following preferences:

• browser.tabs.allow_transparent_browser
• toolkit.legacyUserProfileCustomizations.stylesheets

2. Added the following CSS to my userChrome.css:

:root {
  --tabpanel-background-color: transparent !important;
  background: transparent !important;
}

This was done per: https://www.reddit.com/r/FirefoxCSS/comments/1dqws4b/firefox_128_will_allow_the_main_browser_content/

Actual results:

The background of the main tab panel remains opaque with the original theme-dependent background color.

Expected results:

The background of the main tab panel should've become transparent. In previous versions, this was the result.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Tabbed Browser' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Negritas Sergiu, Desktop QA]

Hello! I have tried to reproduce the issue with firefox 149.0a1(2026-01-19) on Windows 10, unfortunately I wasn't able to reproduce the issue.
Could you please answer the following questions in order to further investigate this issue

1. Does this issue happen with a new profile? Here is a link on how to create one: https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles
2. Could you please provide a video with the issue?
3. Could you please where the userChrome.css file is located or where should I add the CSS code snippet.

Comment 3

[Ignacy Tomczyk]

(In reply to Negritas Sergiu, Desktop QA from comment #2)

Hello! I have tried to reproduce the issue with firefox 149.0a1(2026-01-19) on Windows 10, unfortunately I wasn't able to reproduce the issue.
Could you please answer the following questions in order to further investigate this issue

1. Does this issue happen with a new profile? Here is a link on how to create one: https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles
2. Could you please provide a video with the issue?
3. Could you please where the userChrome.css file is located or where should I add the CSS code snippet.

Thank you for your quick response!

1. When I created a new profile and copied my setup, the issue still persisted.
2. Missing Transparency
   The first webpage shown has no transparency properties and is a control. Notice how the second webpage shown (the flashbang) while supposedly being fully transparent does not show Firefox's actual background as seen in the sidebar and title bar, and thus is not actually transparent. Instead, it shows a pure white. On other webpages, the color depends on the theme (e.g. default dark theme -> #1C1B22), but my point still stands.
3. The userChrome.css file should be placed in the current profile's root directory (accessible via about:profiles) under the chrome folder, which usually needs to be created. To see the transparency more easily, or lack thereof, you may also enable Mica if you're on Windows via widget.windows.mica and install the Zen Internet extension which applies custom CSS to websites and adds transparency to them.

The visuals I am trying to achieve in question are as shown in the following image. When reverting to Firefox 147 or prior, my previously listed setup works flawlessly.
Transparency in Firefox

To reiterate, here is my setup:

• browser.tabs.allow_transparent_browser set to true
• toolkit.legacyUserProfileCustomizations.stylesheets set to true
• widget.windows.mica set to true
• Optionally set widget.windows.mica.toplevel-backdrop to 1
• Install the Zen Internet extension
• Add the following CSS to about:profiles > Profile > Root Directory > /chrome/userChrome.css:

:root {
  --tabpanel-background-color: transparent !important;
  background: transparent !important;
}