CSS variable `--scrollbar-bg` does not function

The CSS variable --scrollbar-bg does not function.

Steps to reproduce

Here is an attempt to use the variable:

  1. Create a snippet or use the New Style Rule (next to the :hov and :cls icons in dev tools style section)
  2. Set the selector as :root body.
  3. Create a declaration of --scrollbar-bg: red (or any color)

The code as explained above:

:root body {
    --scrollbar-bg: red;
}

Here is a gif of how to do it:

reproduction-steps

Did you follow the troubleshooting guide? [Y/N]

Yes

Expected result

To simulate the expected result I have commented out a line of app.css as explained in the additional information section.

The scrollbar should have a red background:

Actual result

Here is what it looks like without any changes to app.css.

The scrollbar is NOT red:

Environment

SYSTEM INFO:
Obsidian version: v1.4.16
Installer version: v1.4.16
Operating system: #14-Ubuntu SMP PREEMPT_DYNAMIC Tue Nov 14 14:59:49 UTC 2023 6.5.0-14-generic
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: light
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none


Quick note: I have not tested this extensively on mobile. It seems to be slightly different, though I cannot easily check the specifics through CSS snippets.

Additional information

This is an issue caused by line 6528 (as of writing) in app.css where the property background-color is declared twice. The second declaration makes the background transparent which overrides any setting for the --scrollbar-bg.

body:not(.native-scrollbars) ::-webkit-scrollbar {
  background-color: var(--scrollbar-bg);
  width: 12px;
  height: 12px;
  -webkit-border-radius: var(--radius-l);
  background-color: transparent;
}

Here is how it looks in the inspector reading app.css:

The code as in app.css

Slight Issues with the Obvious Fix

Removing the background-color: transparent declaration by itself will actually cause a new issue. The default declaration of --scrollbar-bg is set on line 1456 is not set as transparent, so the new scrollbar background would look different from how it currently is.

Here’s the variable declaration:

The variable declaration

And here’s how it looks with a functional --scrollbar-bg:

We can note that it uses the variable --mono-rgb-100 with an alpha level of 0.05 which means it current would work in both light and dark modes, so this doesn’t seem to be a mistake.

A potential fix to keep the transparent design could be to change the default --scrollbar-bg to transparent instead of what it currently is, or to go with the slight scrollbar background. This is mostly an aesthetic choice.

Other Scrollbar Related Things for Consideration

There are also other issues I would like to bring up such as the use of --radius-l in the border-radius instead of a specific scrollbar variable and the transparent border with an inconsistent border-width on the ::-webkit-scrollbar-thumb that are related to this exploration of the scrollbar CSS, though that is not within the scope of this bug report.

I will create a feature request and link it below after this for more discussion:

Followup: More scrollbar CSS variables.

2 Likes

Moved to developers and api

1 Like