Background Color Issue in Zen Browser

[trbureiyan]

Captchas

• I have read the instructions.
• I have searched existing issues and avoided creating duplicates.
• I am not filing an enhancement request.

What happened?

Problem description

Since last week, I have been experiencing an issue with my Zen browser. When opening certain web pages, such as Google, LinkedIn, and even my own local applications and pages, the background appears in a brown color. This color has not been assigned by me through CSS, indicating that it seems there is a replacement of the default background color with this brown shade.

Installed Extensions:

• Ninja Cookie
• Facebook Container
• Al Grammar Checker & Paraphraser - LanguageTool
• Simple Translate
• Hide Shorts for YouTube™
• PopUpOFF - Popup and Overlay Blocker
• Webtime Tracker
• Tampermonkey
• Load Time

Installed Mods and Themes:

• Catppuccin (v1.0.0): Unique pastel theme for Zen.
• Super Url Bar (v1.4.1): Rounded edges and blurred background for the URL bar.
• Bookmark Toolbar Tweaks (v1.2.1): Centers bookmarks and hides icons.
• Now Playing Indicator (v1.2.1): Indicator on the 'Now Playing' tab when the sidebar is collapsed.
• Floating URLbar (v1.0.5): Elevates the URL bar when focused with a blurred background.
• Better UniExtBtn (v1.0.0): Changes the unified extensions button to the Zen browser icon.
• Cleaner Extension Menu (v1.0.0): Removes header and reduces the width of the unified extension menu.
• No Sidebar Scrollbar (v1.0.2): Removes the sidebar scrollbar while retaining scroll functionality.
• Zen Back Forward (v1.0.0): Hides the back and forward buttons when not needed.
• Zen Sidebar At Right Side (v1.0.2): Pins or floats the Zen sidebar to the right side.
• SuperPins (v1.3.7): Enhances pinned tabs with UI/UX changes.
• Better Letterboxing (v1.0.0): More pleasant, theme-friendly, and rounded letterboxing.
• Zen Minimal Exit Menu (v1.0.2): Changes the exit menu to a minimal design.
• Floating History (v1.0.0): Detaches and moves a redesigned history sidebar.
• Floating Status Bar (v1.0.0): Detaches the status bar from the bottom left corner of the browser window.

Disabled Mods:

• Catppuccin
• Audio TabIcon Plus
• Allow Toolbar Theming
• Better Active Tab
• Erics Zen UI Tweak Box
• Better Unloaded Tabs

I have numerous extensions and mods installed, including Ninja Cookie, Facebook Container, and various UI/UX enhancements. Despite disabling all mods and extensions, the problem persists, suggesting it may be related to the browser's internal configurations or rendering engine.

Other Enabled Browser Settings:

• Use workspace colors as primary color
• Dark Theme Styles
• Default Dark Theme
• Button Style: Pilled Buttons
• Show in Compact View: Only show the toolbars you use
• Enable Zen Browser's Compact Mode
• Hide Tab Bar

Settings Configuration: The browser is set to use a dark theme, and I have enabled various compact view settings. However, these configurations do not seem to influence the background color issue.

This issue not only disrupts the aesthetic of the browsing experience but may also hinder usability, as the unexpected color can be jarring and distract users from the content they are trying to access.

I would appreciate any guidance or suggestions that could help resolve this issue. It would be beneficial to understand if this is a known bug, a configuration error, or if there are specific settings that need to be adjusted to rectify the background color anomaly.

Thank you for your attention to this matter. I look forward to your response.

Reproducible?

• I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.1-a.16 (64-bit)

What platform are you seeing the problem on?

Windows

Relevant log output

No response

[dosubot]

Hey there, @trbureiyan! I'm here to help you with bug fixes, questions, and becoming a contributor. Let's squash those bugs together! 🐞

There are a few similar issues that have been reported and resolved, which might be related to the background color problem you're experiencing:

1. 1.0.1-a.9 visual bugs: This issue was closed and involved visual bugs, including transparency issues. It was resolved by disabling the forcing of containers to workspaces by default and fixing the browser background being transparent.

2. Some websites backgrounds follow theme's one: This issue was resolved by switching browser.tabs.allow_transparent_browser to false in the about:config settings.

3. Zen is overriding text and border colors on webpages: This issue was caused by the Dark Reader extension affecting webpage colors. Disabling or adjusting the settings of Dark Reader resolved the problem.

For your specific issue, the brown background might be due to a CSS rule in the Zen browser that includes a base64-encoded image in the #zen-main-app-wrapper. You can try the following steps to resolve it:

• Check if the CSS variables --zen-main-browser-background or --zen-grainy-background-opacity are set to values that might cause the brown color. Adjust these variables as needed.
• If the base64 image is not required, remove or comment out the background-image property in the #zen-main-app-wrapper CSS rule.
• Ensure no other CSS rules or browser extensions are overriding the intended background color settings ^[1].

These steps should help you address the background color issue in your Zen browser.

To continue talking to Dosu, mention @dosu.

[trbureiyan]

Done, Solved 👍🏻

[yvvki]

For future readers, I am able to solve it with the second point of turning browser.tabs.allow_transparent_browser from about:config to false.

[adam-the]

@mauro-balades This is a recurring issue and definitely shouldn't be the default option - please consider adjusting it.
Another discussion in Discord about it: https://discord.com/channels/1088172780480114748/1301108856532766741

Not sure why every issue mentioning it is closed.

[trbureiyan]

Yes, as yvvki mentioned, I managed to solve it by changing browser.tabs.allow_transparent_browser from about:config to false, sorry for not mentioning it explicitly. I think that perhaps the default option should be changed.