CODEWITHSUNDEEP
htmlcsssafariscrollbar
Alex Wally
Alex Wally

Reputation: 2339

Safari: Wrong scrollbar color in scrollable div

This is driving me crazy and I hope someone can shed some light on this!

I'm working on a website with a scrollable div. The website has a dark background so I want the scrollbars to be white. However, Safari makes the div's scrollbar black.

Here's a minimal example:

https://codepen.io/ruyven/pen/jOLvbQy

<!DOCTYPE html>
<html>

<body>
  <div class="scrollable">
    <div class="inner" />
  </div>
</body>

</html>

CSS:

body {
  background: black;
}

div.scrollable {
  width: 200px;
  height: 120vh;
  background: #222;
  overflow-y: scroll;
}

div.inner {
  height: 200vh;
}

In Chrome on macOS, everything is fine - both scrollbars are light to match the dark background. Safari however does this:

Image showing the wrong scrollbar color in the div.

View it on iOS or with always visible scrollbars, and it's even worse - both scrollbars are black.

Does anyone know a way to solve this? Preferably one that also works on iOS, which doesn't seem to support custom scrollbars.

Upvotes: 3

Views: 3707

Answers (2)

mzrnsh
mzrnsh

Reputation: 2360

This might help:

html {
  color-scheme: dark;
}

I haven't dug too deep why certain browsers have issues with determining correct scrollbar color for elements with overflow: auto or overflow: scroll, when they have no problem with the default scrollbar used on the body element. But that seems to be the case nonetheless.

The above code will tell them what they already know: the website is dark.

Tested and this approach works in 2023, on Chrome & Safari.

Upvotes: 4

Wesley Jochman
Wesley Jochman

Reputation: 203

Each browser has a different scrollbar design. In order to change it you can use webkit-scrollbar. There are some broswers that do not support this but Safari does. This comes from W3Schools

Here is the browser support

CSS:

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Upvotes: 1

Related Questions