Re: [csswg-drafts] [css-overflow-4] Effect of scrollbar-gutter on viewport (#8099)

RE “I would expect browsers to only resize the layout viewport when the scrollbars are actually present” and “I would expect browsers to not reposition the layout viewport”

This is from a POV where authors should be able to entirely cover the viewport. However, as `scrollbar-gutter` came to existence for visual stability, this makes no sense for posfixed elements as they would shift positions when a scrollbar would be rendered.

An updated expectation in that case – putting visual stability first – would be the opposite as I have suggested:

- I would expect browsers to resize the layout viewport. This way layout remains stable when no scrollbars are shown and when scrollbars are shown.
- I would expect browsers to reposition the layout viewport. This way layout remains stable when no scrollbars are shown and when scrollbars are shown.

This way layout remains stable when the content grows/shrinks:

You can try this out in this demo: https://cdpn.io/pen/debug/PoaEgoW/629275fd041fcf38696ee70e6ee75974 _([source](https://codepen.io/bramus/pen/PoaEgoW/629275fd041fcf38696ee70e6ee75974))_

| | `scrollbar-gutter: stable` (short content) | `scrollbar-gutter: stable` (long content) |
|-|-|-|
| Firefox 107 on macOS | <img width="1537" alt="image" src="https://user-images.githubusercontent.com/213073/203062885-dbdc9d33-b606-4f40-9aa1-ecb6dc348bec.png"> | <img width="1537" alt="image" src="https://user-images.githubusercontent.com/213073/203062925-5b8abb0c-e10e-4ed2-9ded-621223e7e496.png"> |
| Chrome 110 on macOS | <img width="1200" alt="image" src="https://user-images.githubusercontent.com/213073/203063152-b07f5faa-9bd5-4003-a5b8-3e24e59e755b.png"> | <img width="1200" alt="image" src="https://user-images.githubusercontent.com/213073/203063072-d1387405-472a-4cba-88b5-282f8be4c277.png"> |

_(Firefox works as expected here. Chrome affected by https://bugs.chromium.org/p/chromium/issues/detail?id=1251856)_

**BUT**, I’m still wondering about how authors could then cover the viewport entirely, especially when using `scrollbar-gutter: stable both-edges`. On the screenshots above, with the expectations listed just above, there’s no direct way to cover the bright green trip on the right.

Using negative insets – set to [`env(scrollbar-inline-size)`](https://github.com/w3c/csswg-drafts/issues/4691#top)? – could fix the dimensions of the box, but this is only needed when there is no overflow. In case there is overflow, the viewport would be sized correctly.

Maybe it should simply be accepted that `scrollbar-gutter` does not play nice with `position: fixed`?

Or maybe the proposed [`match-parent`](https://w3c.github.io/csswg-drafts/css-overflow-4/#valdef-scrollbar-gutter-match-parent) on the fixedpos elements could be a solution here? This would however – and I know I’m going back full circle here – require the viewport not the get resized/repositioned.


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


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

Received on Monday, 21 November 2022 13:26:45 UTC