Description
The allowed values for the contain-intrinsic-*
properties 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 where the scrollbar will shift:
- 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)
- 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. 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:
This should be possible without the needs for an extra script. What if a value like
contain-intrinsic-size: auto;
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?