1789036 - Scrollbar thumb disappears when hovered, in documents with dark background-color on `html` vs. light background-color on `body`

Status: NEW

(Core :: Layout: Scrolling and Overflow, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:

1. Load attached testcase.
2. Hover the scrollbar thumb on the right side of the page.

ACTUAL RESULTS:
When hovered, the scrollbar thumb changes to the same color as its track and disappears.

EXPECTED RESULTS:
Scrollbar thumb should remain visible.

This bug reproduces for me on "testcase 1" regardless of whether I have Always show scrollbars enabled or disabled.

However, at the original site where I hit this, https://bayareapetpals.com , this is only reproducible if you have "always show scrollbars" enabled. (My upcoming testcase 2 also only reproduces with that setting enabled.)

The key difference between testcase 1 vs. the original site / testcase 2 is the presence of margins on the body element, creating some dark area where the html background shows through (and matches the color of the scroll thumb).

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (only repro's if "Always Show Scrollbars" is enabled)

Comment 2

[Daniel Holbert [:dholbert]]

Version info: I'm using Firefox Nightly 106.0a1 (2022-09-01), on Ubuntu 22.04.

Also notable: dark-mode vs. light-mode makes no difference here. (We make the same decision about scrollbar coloring on the attached testcase regardless of whether I'm in dark vs. light mode.)

Toggling ni=emilio since he's helped with other similar issues in the past. emilio, do you know what's going on here & if we have any good options to address this?

(From a little bit of playing with the testcase, it looks like we're choosing the thumb's hover-color here such that it'll contrast against the body's background-color -- but in fact the scroll thumb is sometimes drawn over the html element's background-color.)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (try me using overlay scrollbars)

Just to poke at the complexity here, here's a variant of the testcase that's particularly troublesome using overlay scrollbars.

This testcase has a large margin-top on the body, and a little bit of a margin-right, so you can see some of the html background in those areas.

This means that the scrollbar may overlap the html element's background, or the body's background, or both.

(Also: if you adjust this testcase to zero out the margin-right, then it ends up looking like the scroll track just disappears when you reach the body, which is a bit odd.)

Having said that: hopefully this variant is a bit pathological.... Testcase 2 is a real-world scenario taken from the bayareapetpals.com site, but this Testcase 3 maybe isn't as real-world I hope.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

This is expected per https://searchfox.org/mozilla-central/rev/25ec642ed33ca83f25e88ec0f9f27e8ad8a29e24/layout/painting/nsCSSRendering.cpp#1159. that prefer body option was added to improve rendering on other sites, so not sure whether we can improve on the heuristic, maybe "prefer body if it's full-width" or so?

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: screencast of testcases 1 and 3 with overlay scrollbars (on Ubuntu)

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: screencast of testcases 1, 2, 3 with "Always Show Scrollbars" on Ubuntu