[css-scrollbars] What is "the background"

[frivoal]

In #9853, we resolved that:

transparent colors in the thumb are transparent towards the track, and transparent colors in the track are transparent towards the background […]

But what exactly is "the background"? As far as I can tell from testing, Firefox and Chrome do agree: this is the composited background of all elements that end up behind, including images, gradients… and if the backgrounds themselves are transparent, you include further backgrounds behind. It does not include the content of the scrolling element, but it does include the content of ancestors / things behind:

http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=12876

Since implementations agree, I see no strong reason to propose anything else, but is there a pre-existing term to refer to this kind of background?

I'm guessing that it is effectively transparent towards everything, not just things that are technically background, and it is merely that the content of the scrolling element itself is clipped (to the padding box), so there's nothing to be transparent to.

[astearns]

@frivoal since this will be attempting to specify reality, could we take this as an async resolution? Perhaps if you had a proposed resolution, people would reply with corrections 😁

[flackr]

I'm guessing that it is effectively transparent towards everything, not just things that are technically background, and it is merely that the content of the scrolling element itself is clipped (to the padding box), so there's nothing to be transparent to.

Yes, that's my understanding of what is happening in Chrome at least. Note that if you set background-attachment: local on the scrolling container the background is also clipped to the padding box: https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=13412

Effectively the non-overlay scrollbars (and non-local background) extend beyond the scrolling content. Overlay scrollbars draw overtop of the scrolling content.

Note that we have talked in other issues about changing the scrolling content clip - so I think it would be more correct to just say that the thumb is composited above the track which is composited above the scrolling container (and scrolling contents if they are not clipped or if using overlay scrollbars).

[kbabbitt]

the thumb is composited above the track which is composited above the scrolling container (and scrolling contents if they are not clipped or if using overlay scrollbars)

...and the scrolling container is, as usual, composited above content that's behind it in z-order? Makes sense to me.

[frivoal]

Note that if you set background-attachment: local on the scrolling container the background is also clipped to the padding box: https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=13412

That specific part is true in chrome, but not in Firefox. Is that already observable in different circumstances, or covered by some spec, or would we be here looking to define which one is correct?

[frivoal]

background-clip's initial value is border-box, and I am not finding any spec language that we somehow switch that to being padding-box when background-attachment is local, so I think Firefox is right here, and Chrome's buggy, and we can just resolve about what we were discussing earlier: the track is transparent towards the whole element, (noting that by default https://drafts.csswg.org/css-overflow-4/#overflow-clip-margin means that the content of it is clipped to the padding box).