Safari 18.2 and overlay scrollbars

phiw13 · 2024-12-18 09:21:48

Do people running macOS 15 (sequoia) see the same ?

On macOS 13 and 14 with overlay scrollbars enabled (System settings > Appearance: ‘Automatically based on mouse or trackpad’ ) safari now shows a semi permanent scrollbar, as if those are permanent scrollbars.

But they are still overlay, that scrollbar overlaps the content close to the edge. What more the scrollbar thumb behaves extremely weirdly: a snapback effect when dragging, erroneous scroll postion of the thumb at other times, …

Screenshots on the forum:

on page load dev.l-c-n.com/_b/scroll1.png
after some scrolling dev.l-c-n.com/_b/scroll2.png

giz · 2024-12-18 16:38:32

I haven’t noticed any issues… my scrollbars are white with a silver outline.

bici · 2024-12-18 19:00:41

my experience with scroll bars on Safari is that they are barely visible. white on white.
on most other sites they are grey on white.

dos · 2024-12-18 19:39:25

Yes, I’ve noticed that. I’m on Ventura but Safari is probably the same version (18.2).

phiw13 · 2024-12-18 22:43:07

dos wrote #338587:

Yes, I’ve noticed that. I’m on Ventura but Safari is probably the same version (18.2).

Yes macOS 13 and macOS 14 for sure, I don’t have access to macOS 15.

I perhaps gave a wrong example by using the forum (I have some user stylesheet have to correct to poopy poor scrollbars on the forum). The issue happens on any and all sites.

Screenshots in this textarea, while typing (first load/focus), then after scrolling a little bit: scroll 3 and scroll4

jakob · 2024-12-19 05:35:34

giz wrote #338583:

I haven’t noticed any issues… my scrollbars are white with a silver outline.

bici wrote #338586:

my experience with scroll bars on Safari is that they are barely visible. white on white.
on most other sites they are grey on white.

Same here on Sequoia for the page scrollbars, while the textarea scrollbars are normal. The white on white scrollbar colour seems to be a response to:

body {
    background-color: var(--clr-text);
    …
}

in the screen.css stylesheet. Presumably, it’s trying to contrast with the apparent dark background of the body tag. The .wrapper div inside the body reverses the colour combination.

If you disable that css directive, or set it to a light background-color, in the browser devtools, the scrollbar returns to normal.

phiw13 · 2024-12-19 05:54:11

jakob wrote #338593:

Same here on Sequoia for the page scrollbars, while the textarea scrollbars are normal. The white on white scrollbar colour seems to be a response to […]

The white-on-white scroll thumb with overlay scrollbars (with any macOS/iOS browser) was documented a long time ago, in this thread. To my immense chagrin, it seems it is here to stay :-(. But that was not at all what I was referring to here.

–^–

Here is another example, this Apple support page as seen on Safari and on Firefox. Notice the difference regarding the scroll bars? Safari 18.2 with macOS 14 shows a wrong behaviour, there should not be any scrollbar with the given the system settings. Firefox behaves correctly.

bici · 2024-12-19 16:41:52

phiw13 wrote #338594:

–^–

Here is another example, this Apple support page as seen on Safari and on Firefox. Notice the difference regarding the scroll bars? Safari 18.2 with macOS 14 shows a wrong behaviour, there should not be any scrollbar with the given the system settings. Firefox behaves correctly.

On Safari 18.2 under Mac OS 15.2 the Scroll bars are grey and very noticeable . ..

phiw13 · 2024-12-20 09:42:38

bici wrote #338599:

On Safari 18.2 under Mac OS 15.2 the Scroll bars are grey and very noticeable . ..

If I understand you correctly, you see a semi-permanent scrollbar on the page, similar to the screengrab I posted ?

That would actually be nice in a way, and gives hope that Safari / Apple tries to improve the situation for all supported OS.

The root cause of the issue is Safari implementing scrollbar styling, see the release notes: webkit.org/blog/16301/webkit-features-in-safari-18-2/#:~:text=Scrollbars

jakob · 2024-12-20 09:49:24

phiw13 wrote #338594:

The white-on-white scroll thumb with overlay scrollbars (with any macOS/iOS browser) was documented a long time ago, in this thread.

So you did. And right you are. I’d also set the color too so that the footer text is white, but otherwise your solution solves it.

bici · 2024-12-20 20:58:15

phiw13 wrote #338603:

If I understand you correctly, you see a semi-permanent scrollbar on the page, similar to the screengrab I posted ?

Yes. The grey bar is very visible. Whereas herein on the TxP forums I can barely see the bar and quite often it proves difficult to see it.

Textpattern CMS

Textpattern CMS support forum

#1 2024-12-18 09:21:48