1571376 - scrollbar-width CSS property value is also applied to select dropdown arrow

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect, P3)

Description

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0

Steps to reproduce:

Set all elements on page to use thin scrollbars:

* {
  scrollbar-width: thin
}

Implement a select field with options.

I'm using Firefox Developer Edition 69.0b10 (64-bit) on Windows 10.

Actual results:

The scrollbar-width property's value is used on the select element's dropdown arrow as well. So the dropdown arrow becomes way too small.

Expected results:

IMO a select's dropdown arrow should not be considered as a scrollbar, thus, scrollbar-width CSS property shouldn't affect it at all.

Workaround: to select, I reset scrollbar-width to "auto", but this shouldn't be necessary.

(ie. for Chrome, I'm using the ::-webkit-scrollbar-thumb pseudo element to style the scrollbars, and the values I give there do not apply to select element's dropdown button. This would be the desirable approach).

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Can you share a screenshot of the rendering of data:text/html,<select style="scrollbar-width: thin"><option>ABCDE</option></select>?

This looks like a plausible side effect of this line of code, but it looks fine here on Linux anyway (some OSes paint the <select> differently).

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Oh, I guess I can repro everywhere with data:text/html,<select style="scrollbar-width: thin; border: 1px solid"><option>ABCDE</option></select>

Comment 4

[Emilio Cobos Álvarez (:emilio)]

(So I don't forget)

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1571376 - Make scrollbar-width not impact the select button size. r=mats

Comment 6

[zavecz.krisztina]

Attachment: Screenshot of scrollbar-width: thin being applied to select dropdown button.

Comment 7

[Anand Rathod]

Try this one

*:not(select) {
  scrollbar-width: thin
}

Comment 8

[zavecz.krisztina]

(In reply to Anand Rathod from comment #7)

Try this one

*:not(select) {
  scrollbar-width: thin
}

This is not that I couldn't solve it by CSS, it is a bug, because scrollbar-width property should not apply to dropdown arrows.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Yes, this is clearly a bug. Sorry I still haven't found time to debug why the test I added in the patch still fails in some platforms...

I need to do that, though I'm swamped with other stuff atm, and this has a very easy work-around (select { scrollbar-width: auto }) that it's hard to prioritize.

I'll try to get to it, I promise... Though If somebody wants to take over the patch and figure it out I'd be happy to help/mentor :)

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1571376 - Make all themes support non-disappearing scrollbar sizes. r=mstange

That is, so that the select dropdown button always take the size of a
native scrollbar rather than a potentially custom scrollbar.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9de39e80563d
Make all themes support non-disappearing scrollbar sizes. r=mstange

Comment 12

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/9de39e80563d