Re: [csswg-drafts] [css-overflow-4] drawing over the space reserved by `scrollbar-gutter` (#5232)

The main problem with `scrollbar-gutter` is that it doesn't provide a good solution when you want some elements to extend all the way to the edge while others respect the scrollbar gutter.

For example, let's say that you have a header/toolbar and a list of items with text on the left and a checkbox on the right.

When the scrollbar is fixed, you want this:

![examplefixedaligned](https://user-images.githubusercontent.com/1412060/109447621-72323a00-7a87-11eb-81b6-1aeaedb3f98d.png)

And when it is overlay, you want this:

![exampleoverlaydoesnotcover](https://user-images.githubusercontent.com/1412060/109447529-3c8d5100-7a87-11eb-9a02-58fb20f0478d.png)

Keeping the header aligned is easy with the `force` keyword. The problem comes when you try to align the scrolling content.

With `scrollbar-gutter: stable` the overlay scrollbar covers the interactive elements, making the UI hard to use:

![exampleoverlaycovers](https://user-images.githubusercontent.com/1412060/109447998-57ac9080-7a88-11eb-8394-1ebd184c757a.png)

On the other hand, with `scrollbar-gutter: always` the background for each item doesn't extent all the way to the edge when the scrollbar is overlay:

![exampleoverlaybackgroundissue](https://user-images.githubusercontent.com/1412060/109447802-df45cf80-7a87-11eb-861f-accc5d9c958a.png)

You can work around that by using `force` on each individual item (that's how I created the second image above), but then the layout with fixed scrollbars becomes messed up:

![examplefixednotaligned](https://user-images.githubusercontent.com/1412060/109448156-a35f3a00-7a88-11eb-88c4-063095fa92a7.png)

(Images taken from the [examples in the explainer](https://github.com/felipeerias/scrollbar-gutter-explainer/tree/master/examples))

// @frivoal @Rayraz 

-- 
GitHub Notification of comment by felipeerias
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5232#issuecomment-787614795 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 1 March 2021 03:44:02 UTC