[GH-ISSUE #22538] issue: can't read the page because linear gradient makes text too dim #58405

Closed
opened 2026-05-05 23:06:20 -05:00 by GiteaMirror · 3 comments
Owner

Originally created by @6000years on GitHub (Mar 10, 2026).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/22538

Check Existing Issues

  • I have searched for any existing and/or related issues.
  • I have searched for any existing and/or related discussions.
  • I have also searched in the CLOSED issues AND CLOSED discussions and found no related items (your issue might already be addressed on the development branch!).
  • I am using the latest version of Open WebUI.

Installation Method

Docker

Open WebUI Version

0.8.10

Ollama Version (if applicable)

No response

Operating System

fedora 43

Browser (if applicable)

firefox

Confirmation

  • I have read and followed all instructions in README.md.
  • I am using the latest version of both Open WebUI and Ollama.
  • I have included the browser console logs.
  • I have included the Docker container logs.
  • I have provided every relevant configuration, setting, and environment variable used in my setup.
  • I have clearly listed every relevant configuration, custom setting, environment variable, and command-line option that influences my setup (such as Docker Compose overrides, .env values, browser settings, authentication configurations, etc).
  • I have documented step-by-step reproduction instructions that are precise, sequential, and leave nothing to interpretation. My steps:
  • Start with the initial platform/version/OS and dependencies used,
  • Specify exact install/launch/configure commands,
  • List URLs visited, user input (incl. example values/emails/passwords if needed),
  • Describe all options and toggles enabled or changed,
  • Include any files or environmental changes,
  • Identify the expected and actual result at each stage,
  • Ensure any reasonably skilled user can follow and hit the same issue.

Expected Behavior

I should be able to read the conversation with the llm.

Actual Behavior

Too difficult to read (text too dim).

Steps to Reproduce

Click 'New Conversation'. Prompt the llm.

Logs & Screenshots

Image Image Image

Additional Information

just a guess, but maybe the intention was to apply the gradient just to the top navbar header. in fact the gradient is spilling over to the whole height of the page, and I can't read it.
However if I duplicate the tab, or click on the conversation title in the left sidebar, then the gradient goes away.

Originally created by @6000years on GitHub (Mar 10, 2026). Original GitHub issue: https://github.com/open-webui/open-webui/issues/22538 ### Check Existing Issues - [x] I have searched for any existing and/or related issues. - [x] I have searched for any existing and/or related discussions. - [x] I have also searched in the CLOSED issues AND CLOSED discussions and found no related items (your issue might already be addressed on the development branch!). - [x] I am using the latest version of Open WebUI. ### Installation Method Docker ### Open WebUI Version 0.8.10 ### Ollama Version (if applicable) _No response_ ### Operating System fedora 43 ### Browser (if applicable) firefox ### Confirmation - [x] I have read and followed all instructions in `README.md`. - [x] I am using the latest version of **both** Open WebUI and Ollama. - [x] I have included the browser console logs. - [x] I have included the Docker container logs. - [x] I have **provided every relevant configuration, setting, and environment variable used in my setup.** - [x] I have clearly **listed every relevant configuration, custom setting, environment variable, and command-line option that influences my setup** (such as Docker Compose overrides, .env values, browser settings, authentication configurations, etc). - [x] I have documented **step-by-step reproduction instructions that are precise, sequential, and leave nothing to interpretation**. My steps: - Start with the initial platform/version/OS and dependencies used, - Specify exact install/launch/configure commands, - List URLs visited, user input (incl. example values/emails/passwords if needed), - Describe all options and toggles enabled or changed, - Include any files or environmental changes, - Identify the expected and actual result at each stage, - Ensure any reasonably skilled user can follow and hit the same issue. ### Expected Behavior I should be able to read the conversation with the llm. ### Actual Behavior Too difficult to read (text too dim). ### Steps to Reproduce Click 'New Conversation'. Prompt the llm. ### Logs & Screenshots <img width="2460" height="813" alt="Image" src="https://github.com/user-attachments/assets/9b9d0535-c878-45fb-a333-6f923718e69b" /> <img width="1075" height="1357" alt="Image" src="https://github.com/user-attachments/assets/0d79432f-8e6a-4cd2-87f1-823343c257af" /> <img width="1438" height="431" alt="Image" src="https://github.com/user-attachments/assets/7b4c010f-0de0-436b-85b3-2687a5ca2c28" /> ### Additional Information just a guess, but maybe the intention was to apply the gradient just to the top navbar header. in fact the gradient is spilling over to the whole height of the page, and I can't read it. However if I duplicate the tab, or click on the conversation title in the left sidebar, then the gradient goes away.
GiteaMirror added the bug label 2026-05-05 23:06:20 -05:00
Author
Owner

@ShirasawaSama commented on GitHub (Mar 11, 2026):

What is the version of your browser's kernel?

<!-- gh-comment-id:4037229090 --> @ShirasawaSama commented on GitHub (Mar 11, 2026): What is the version of your browser's kernel?
Author
Owner

@6000years commented on GitHub (Mar 11, 2026):

It's firefox developer edition 149.0 beta5.

After looking at this a bit more, I've noticed that the problem is a bit worse than I originally noted because the fixes (F5, duplicate tab, click on conversation in sidebar) only last a few seconds.

I see that the offending element «div id="navbar-bg-gradient-to-b"» has a computed value for bottom of -40px which comes from both
.-bottom-10: calc(var(--spacing)*-10)
and
.inset-0: calc(var(--spacing)*0)
with --spacing set at .25rem

If I untick/deactivate those 2 css props then the computed value of bottom is removed (goes to browser default) and the issue goes away.

<!-- gh-comment-id:4039509696 --> @6000years commented on GitHub (Mar 11, 2026): It's firefox developer edition 149.0 beta5. After looking at this a bit more, I've noticed that the problem is a bit worse than I originally noted because the fixes (F5, duplicate tab, click on conversation in sidebar) only last a few seconds. I see that the offending element «div id="navbar-bg-gradient-to-b"» has a computed value for bottom of -40px which comes from both .-bottom-10: calc(var(--spacing)*-10) and .inset-0: calc(var(--spacing)*0) with --spacing set at .25rem If I untick/deactivate those 2 css props then the computed value of bottom is removed (goes to browser default) and the issue goes away.
Author
Owner

@tjbck commented on GitHub (Mar 15, 2026):

Unable to reproduce, likely a browser bug/error. Keep us posted.

<!-- gh-comment-id:4064180740 --> @tjbck commented on GitHub (Mar 15, 2026): Unable to reproduce, likely a browser bug/error. Keep us posted.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#58405