Re: [w3ctag/design-reviews] CSS Scrollbars: scrollbar-color, scrollbar-width (#563)

Alright, I'll try to give some initial feedback on the `scroll-gutter` property. I've only just familiarized myself with the explainer (https://github.com/felipeerias/scrollbar-gutter-explainer) and the `match-parent` flag (https://github.com/w3c/csswg-drafts/issues/5232). I may very well be unaware of other relevant discussions. Please feel free to direct me to other issue as necessary.

There are a few things I noticed which don't appear to have been covered in the explainer yet:

### positioning of nested elements

I noticed the explainer doesn't appear to define exactly how nested elements will be positioned inside a container with a `scroll-gutter`.

For example: Say I have a container element with `position: relative` and a child element inside it with `position: absolute; bottom: 0px; right: 0px`. Currently, this would position the child element at the bottom-right corner of it's parent such that the outer edges of the child element (including it's borders) align with inner edge of the border of the parent element.

How would such a child element be positioned if the parent control has a `scroll-gutter`? Does the child element remain aligned with the inner edge of the parent's border or does it align with the inner edge of the gutter?

I'm partial to aligning the child with the inner edge of the gutter. Mostly because one of the big reasons to have a `scroll-gutter` at all is to keep an overlay scrollbar from being drawn on top of any content.

However, I do think we should also give people an easy way to align such a child element with the inner edge of the container's border. Unfortunately this brings about the problem mentioned here: https://github.com/w3c/csswg-drafts/issues/5232#issuecomment-648047604

I can think of two possible approaching to solving this:
 - Figuring out some kind of css unit that matches the width of the gutter. The value of such a unit would be contextual, much like `rem`.
 - A new css property that defines which box a child element should aligned itself with (content-box, padding-box, gutter-box, border-box).

### background-clip

I also noticed the explainer doesn't appear to define how the gutter should apply to the `background-clip` value. Perhaps we could add an additional value there such as `background-clip: scroll-gutter-box`?


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/563#issuecomment-785384380