Bugzilla

(In reply to Alice0775 White from comment #4)
> The scrollbar also appear in Chrome99

Confirmed, I see this in Chrome 99 (tested on Windows) and in Chrome 101 dev (tested on Linux)

> but it is styling.

By this I think you mean "it's styled to look nice", i.e. it's more subtle -- it just looks like a red bar there. That comes from this styling:
```css
.trending__items::-webkit-scrollbar {
    background-color: var(--trending-scrollbar-background-color);
    height: 6px;
}
.trending__items::-webkit-scrollbar-thumb {
    background-color: var(--trending-scrollbar-color);
    border-radius: 10px;
}
```

If I uncheck those lines in devtools to disable those styles, then Chrome looks exactly like Firefox does in the attached screenshot (ugly scrollbar, partially covering up the content).

So:
(1) The fact that a scrollbar started appearing here is an expected outcome of the fact that we're now required by the spec to add some additional space influence the scrollable area of a scrollable flex container (per bug 1697349), and this makes us interoperable with Chrome on this point.

(2) The fact that Chrome looks nicer than us here is from the fact that they're honoring `-webkit-scrollbar` styles which is non-standard and which we don't support per https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar / https://caniuse.com/?search=webkit-scrollbar

So: the issue here is a bug in the site (the fact that they use styles that [per up-to-date specs] create scrollable area and hence a scrollbar, and then they prettify/shrink that scrollbar in a WebKit-prefixed way.

--> Reclassifying as Web Compatibility; we could suggest that they style this scrollbar with the standard `scrollbar-width` and `scrollbar-color` properties, rather than this non-standard styling that I quoted above.

e.g. this CSS rule is almost equivalent to what they have above, except without the explicit 6px and without the border-radius rounding:
```css
.trending__items {
    scrollbar-color: var(--trending-scrollbar-color) var(--trending-scrollbar-background-color);
    scrollbar-width: thin;
}
```

They should be able to add the above rule (to get a reasonable look in all browsers that support those standard properties, which right now is [just Firefox](https://caniuse.com/?search=scrollbar-color) unfortunately) and then use the prefixed styles to specify the rounding and precise size in browsers that support those styles, I think (if they care to do so).

(In reply to Alice0775 White from comment #4)
> The scrollbar also appear in Chrome99

Confirmed, I see this in Chrome 99 (tested on Windows) and in Chrome 101 dev (tested on Linux)

> but it is styling.

By this I think you mean "it's styled to look nice", i.e. it's more subtle -- it just looks like a red bar there. That comes from this styling:
```css
.trending__items::-webkit-scrollbar {
    background-color: var(--trending-scrollbar-background-color);
    height: 6px;
}
.trending__items::-webkit-scrollbar-thumb {
    background-color: var(--trending-scrollbar-color);
    border-radius: 10px;
}
```

If I uncheck those lines in devtools to disable those styles, then Chrome looks exactly like Firefox does in the attached screenshot (ugly scrollbar, partially covering up the content).

So:
(1) The fact that a scrollbar started appearing here is an expected outcome of the fact that we're now required by the spec to add some additional space influence the scrollable area of a scrollable flex container (per bug 1697349), and this makes us interoperable with Chrome on this point.

(2) The fact that Chrome looks nicer than us here is from the fact that they're honoring `-webkit-scrollbar` styles which is non-standard and which we don't support per https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar / https://caniuse.com/?search=webkit-scrollbar

So: the issue here is a bug in the site (the fact that they use styles that [per up-to-date specs] create scrollable area and hence a scrollbar, and then they prettify/shrink that scrollbar in a WebKit-prefixed way.

--> Reclassifying as Web Compatibility; we could suggest that they style this scrollbar with the standard `scrollbar-width` and `scrollbar-color` properties, rather than this non-standard styling that I quoted above.

e.g. they could add this CSS rule, which is almost equivalent to the scrollbar styles that I quoted above, except without the explicit 6px and without the border-radius rounding:
```css
.trending__items {
    scrollbar-color: var(--trending-scrollbar-color) var(--trending-scrollbar-background-color);
    scrollbar-width: thin;
}
```

They should be able to add the above rule (to get a reasonable look in all browsers that support those standard properties, which right now is [just Firefox](https://caniuse.com/?search=scrollbar-color) unfortunately) and then use the prefixed styles to specify the rounding and precise size in browsers that support those styles, I think (if they care to do so).