forum: white scrollbar handle on white background

phiw13 · 2020-02-11 00:13:39

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)

Pat64 · 2020-02-11 07:37:20

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

phiw13 · 2020-02-11 08:10:57

Wow patrick, slightly scary :-)

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

philwareham · 2020-02-11 08:45:47

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

philwareham · 2020-02-11 09:31:54

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.

phiw13 · 2020-02-11 09:39:57

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).

philwareham · 2020-02-11 09:46:26

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?

phiw13 · 2020-02-11 09:52:42

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)

philwareham · 2020-02-11 09:57:01

phiw13 wrote #321619:

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

Yeah, the webkit implementation is a right mess.

phiw13 · 2020-02-12 22:14:40

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.

phiw13 · 2022-06-15 06:29:04

This is sad… Some stricter CSP rules and improved CSP support in Safari now prevents my rules to work on some parts of the Textpattern network of site. The forum is unaffected, but the docs website is, as well as the main website.

Firefox still seems unaffected as it does not seem to support some stricter directives.

What prevents Cascadea from inserting styles (a <style /> block) and doing its magic is this:

style-src-elem 'self';

or this

style-src https://textpattern.com 'self'

Although MDN and caniuse.com say it is not supported yet in Safari, in practice Safari 15.5 does support it.

PS – Chromium browsers are possibly even worse off – In Safari, the scroll widget shows a tin outline. Chromium (Brave) show nothing.

PPS – I tried the Chromium Stylus extension but never got it to work without first needing to register and login on some site. Not thanks. Pass. But I imagine the issue of CSS rules would affect the results.

Last edited by phiw13 (2022-06-15 06:51:20)

phiw13 · 2022-08-06 06:23:49

For Safari (15.4+) there is a nice workaround possible

use the build-in mechanism to load a stylesheet (Safari Preferences > Advanced)
target the problem site with the :has() selector to make a site-specific ruleset

The build-in user-stylesheet mechanism in Safari (and Firefox, btw) is generic, rules apply to all sites. Firefox has the document at-rule, but this only works in Firefox. As a workaround, we can look for some site-specific information, e.g in the <head /> that can be used for identification.

Example for docs.textpattern.com – we can assume that only this site will have canonical links that contain the docs.textpattern.com URL pattern

  html:has([rel=canonical][href^="https://docs.textpattern.com/"])  body { background:#fff !important; }
  html:has([rel=canonical][href^="https://docs.textpattern.com/"]) div.wrapper-footer { background-color: #333 !important; }

Save the user-stylesheet and link to it from the Preferences panel (or unlink/link to it to reload) and enjoy seeing the scrollbar handles.

Credit, this Twitter thread: twitter.com/derSchepp/status/1548755658845085697

Textpattern CMS

Textpattern CMS support forum

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