Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2020-02-11 00:13:39

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,015
Website

forum: white scrollbar handle on white background

Did something in the forum stylesheet change recently? on macOS, with the default OS setting (scrollbar: automatic, means show only when needed when using magic mouse or trackpad), Safari, Firefox shows the scrollbar handle as white, which is rather hard to see on a white background.

The <body /> background is set to dark grey (#333), and the background of a wrapper <div class="wrapper" /> is set to #fff. Safari computes the color of the scrollbar handle based on the background of <body />. I think the same happens on iOS, but I haven’t checked recently. This used to be the case a long while ago (there is a forum thread about, can’t find it right now), then was changed, but the old behaviour seems to have returned.

EDIT: Now tested, on iOS 13 as well, of course.

Last edited by phiw13 (2020-02-11 08:13:35)

Online

#2 2020-02-11 07:37:20

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,358
Website

Re: forum: white scrollbar handle on white background

Thank you Philippe! I was looking for the reason: here is a test from FF PC (latest) with an another body background color.


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

#3 2020-02-11 08:10:57

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,015
Website

Re: forum: white scrollbar handle on white background

Wow patrick, slightly scary :-)

Is that the new way Firefox builds the scrollbars (using the CSS specced styling) ?

Online

#4 2020-02-11 08:45:47

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,312
Website

Re: forum: white scrollbar handle on white background

Weird. Nothing changed on the CSS for a while now, no. Will investigate further – thanks for the report.

Offline

#5 2020-02-11 09:31:54

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,312
Website

Re: forum: white scrollbar handle on white background

This seems to be an issue in macOS when scrollbars are set to ‘when scrolling’ or ‘automatically based on mouse or trackpad’ in system prefs (aka. unobtrusive scrollbars). If it’s set to ‘always’ then the scrollbars are visible just fine, and it’s also fine in Dark Mode regardless of system pref setting hence why I haven’t noticed beforehand – as I always have Dark Mode on in macOS Catalina.

My PC laptop is at home today so I can’t test Windows behaviour.

I’ve tried the various standards and pseudo (-webkit- prefixed) CSS and none of them seem to change the scrollbar colours for me, in either Firefox Dev Edition 73 or Safari 13. I’m fairly sure they used to work OK. Hmmm, not sure what to do.

Offline

#6 2020-02-11 09:39:57

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,015
Website

Re: forum: white scrollbar handle on white background

You used to have, in recent times, a white background on the <body /> and the dark grey background set on the <div class="wrapper-footer">.

it “works” in dark mode a little by accident, you set a very dark background on body, hence the overlay-color for the scrollbar handle is (still) whitish. And it “works” with the setting set to ”always”, as in that case, the scrollbar handle is in its own compartment (gutter).

Online

#7 2020-02-11 09:46:26

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,312
Website

Re: forum: white scrollbar handle on white background

I’m still unsure as to why the scrollbar CSS styling I’ve tried doesn’t seem to work, which would be my preferred method to fix this issue. Any ideas?

Offline

#8 2020-02-11 09:52:42

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,015
Website

Re: forum: white scrollbar handle on white background

philwareham wrote #321618:

I’m still unsure as to why the scrollbar CSS styling I’ve tried doesn’t seem to work, which would be my preferred method to fix this issue. Any ideas?

if you used the specced rules, those 1/ only work when the scrollbar setting is set to “always” and 2/ are only supported by Firefox.

Please don’t use the -webkit- prefixed thing. it is horse-excrement.

Last edited by phiw13 (2020-02-11 09:53:05)

Online

#9 2020-02-11 09:57:01

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,312
Website

Re: forum: white scrollbar handle on white background

phiw13 wrote #321619:

Please don’t use the -webkit- prefixed thing. it is horse-excrement.

Yeah, the webkit implementation is a right mess.

Offline

#10 2020-02-12 22:14:40

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,015
Website

Re: forum: white scrollbar handle on white background

I temporarily fixed it in my user stylesheet:

@media (prefers-color-scheme:light) {
	body { background:#fff !important; }
	div.wrapper-footer { background-color: #333 !important; }
}

And fwiw: this also affects the textpattern.com main website and the docs pages. Same rules as above apply.

Online

Board footer

Powered by FluxBB