[csswg-drafts] [css-sizing-4] [css-contain] Proposal to add `contain-intrinsic-size: auto;` to fix shifting scrollbar problem. (#5815)

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing-4] [css-contain] Proposal to add `contain-intrinsic-size: auto;` to fix shifting scrollbar problem. ==
The allowed values for [the `contain-intrinsic-*` properties](https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override) are either `none` or a `<length>`, with an initial value of `none`.

When a `contain-intrinsic-size: none;` is combined with `content-visibility: auto;` you get the [already documented side effect](https://web.dev/content-visibility/#specifying-the-natural-size-of-an-element-with-contain-intrinsic-size) where the scrollbar will shift:

1. As more content almost comes into view and will get rendered, the scrollbar's thumb will shrink and jump a bit up the scrollbar track _(cfr. infinite scrolling)_
2. As already rendered content slides out of view and eventually no longer gets rendered, the scrollbar's thumb will grow and and jump a bit down the scrollbar track.

To cater for the 2nd problem @slightlyoff has [created a little script (using `IntersectionObserver` and `ResizeObserver`) which automatically injects `contain-intrinsic-size` on elements that get rendered](https://infrequently.org/2020/12/resize-resilient-deferred-rendering/). As those elements then slide out of the viewport and eventually get hidden — due to `content-visibility: auto;` doing its thing — the symptoms of that 2nd problem no longer appear — due to `contain-intrinsic-size` which got injected.

This [made me wonder](https://www.bram.us/2020/12/21/content-visiblity-vs-jumpy-scrollbars-a-solution/#note):

> This should be possible without the needs for an extra script. What if a value like <code>contain-intrinsic-size: auto;</code> would be allowed, and do exactly as the script Alex built does?

The way I see it, a value of `auto` would by default behave like `none` does, but once an element has been rendered and its dimensions are known, those dimensions would then be stored (internally) for further use. That way once it slides out of view again and gets hidden, there's no issue with the scrollbar.

With this addition I'd keep the initial value of `none` for the `contain-intrinsic-*` properties in place, as choosing for `auto` comes at an expense (I guess). Therefore it should be opt-in, as an explicit choice by the developer.

Would this be something worth pursuing?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5815 using your GitHub account


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

Received on Monday, 21 December 2020 22:13:51 UTC