2028308 - Consider suppressing scrollbars that have zero "thickness" in a ::-webkit-scrollbar rule

Status: RESOLVED FIXED

(Core :: Layout: Scrolling and Overflow, enhancement)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

See attached testcase. Maybe we should match Chrome in suppressing scrollbars for some of the cases here?

Specifically -- maybe we should suppress all of the scrollbars where the webkit-scrollbar rule gives them zero "thickness"? (horizontal scrollbars that have height: 0 and vertical scrollbars that have width: 0)

This would get us "good" results on WebCompmat Site Report bug 1925937.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Nightly 151.0a1 (left) vs Chrome (right)

Here's a screenshot comparing us to Chrome.

Notable observations:

1. Chrome only suppresses scrollbars who have zero "thickness" -- e.g. in Chrome's rendering of the first part of the testcase (top-right portion of my screenshot), the width:0 suppresses the vertical scrollbar, whereas the horizontal scrollbar simply stops painting (but still occupies the regular amount of blank layout space for the scrollbar- track) -- presumably it's blank because I didn't provide styles for how to paint it.
2. So in Chrome, the third part of this testcase -- the part with width:0; height:0 -- is essentially equivalent to scrollbar-width:none. The first and second part are a bit more subtle because they only zero out one scrollbar.
3. Firefox Nightly matches Chrome on the fourth part of this testcase (thanks to bug 1977511), and we match Chrome on the fifth part of this testcase because it's using the standard styles.

Comment 2

[Daniel Holbert [:dholbert]]

The gazetasp.com.br site in bug 1925937 uses styles like the third part of my testcase (specifying both width:0 and height:0).

If we suspect other sites might be doing the same thing with a similar scrollbar-hiding intent, we might consider special-casing ::-webkit-scrollbar { width: 0; height: 0; } as behaving like scrollbar-width: none. (Where sites might use e.g. "0px" etc instead of literal 0.)

(We might also try to get the single-axis-collapsing from the first and second part of my testcase -- but as of now, we don't have any confirmation that sites actually do that, so maybe that's something to not worry about until we have a demonstration that it's needed.)

hiro, what do you think? Do you have cycles to craft a followup along those lines? (As of now I only know of one WebCompat Site Report that would benefit from this, so maybe not a high reward, but also perhaps pretty low-cost as well, since I imagine a lot of the supporting pieces are now already there.)

Comment 3

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 2028308 - Hide scrollbars when ::-webkit-scrollbar has width:0 and height:0. r?#layout-reviewers

webkit-scrollbar-zero-width-and-height.html: Tests that setting both width
and height to 0 on ::-webkit-scrollbar hides the scrollbars, matching the
display:none behavior.

webkit-scrollbar-zero-width-and-height-scrollbar-width-thin.html: Tests that
a non-auto scrollbar-width (thin) clobbers the width:0/height:0 hiding, so
scrollbars remain visible.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

I did instruct Claude Code to write D291361 step by step, so that it reflects my preferences, e.g. I don't want to use std::pair of bool. Anyways, if there's any mistake, it's my fault. Indeed now I realized I forgot adding the reviewer. :)

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Attachment: WIP: Bug 2028308 - Hide scrollbars when ::-webkit-scrollbar has width:0 and height:0.

webkit-scrollbar-zero-width-and-height.html: Tests that setting both width
and height to 0 on ::-webkit-scrollbar hides the scrollbars, matching the
display:none behavior.

webkit-scrollbar-zero-width-and-height-scrollbar-width-thin.html: Tests that
a non-auto scrollbar-width (thin) clobbers the width:0/height:0 hiding, so
scrollbars remain visible.

webkit-scrollbar-percent-width-height.html: Updated to only set one dimension
per test case (width-only or height-only), since setting both to percent values
would now trigger the width:0/height:0 hiding behavior (percent is treated as 0
on Blink/WebKit).

Comment 6

[Hiroyuki Ikezoe (:hiro)]

There was another mistake by me! I was being ignorant about the initial value of width/height style.

And I don't know what happened. there remained a previous version of the patch. I am going to abandon it.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c56b5e770ef7
https://hg.mozilla.org/integration/autoland/rev/7dcfb1af2ffa
Hide scrollbars when ::-webkit-scrollbar has width:0 and height:0. r=jwatt

Comment 8

[Silaghi Andreea]

https://hg.mozilla.org/mozilla-central/rev/7dcfb1af2ffa