Spec at https://drafts.csswg.org/css-sizing-4/#propdef-contain-intrinsic-size
Current contain-intrinsic-size syntax is limited to specifying
exact dimensions in the CSS. This is not just unfortunate because
authors have to make a guess at the final rendered size, but
if size containment toggles between on and off states (e.g.
due to content-visibility: auto), the size of the box will
likely change, leading to negative consequences:
o 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) o 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.
(copied from a web developers complaint at w3c/csswg-drafts#5815)
Note that without scroll anchoring, the current scroll position could change due to this effect as well.
This change introduces an "auto" keyword for contain-intrinsic-size, combined with a fallback size:
contain-intrinsic-size: auto 100px auto 200px;
The semantics are (informally): o If the element was previously laid out without size containment, that size gets saved and used when size containment is applied o If the element was not previously laid out, the fallback size is used.
The exact semantics are defined more precisely in the spec. This solves the problem because once an element is rendered, it won't change size again.
A mostly unrelated change is as follows: Currently, contain-intrinsic-size requires specifying the size as physical axes (width/height). It would be desirable to allow specifying the size using inline-size and block-size for better handling of vertical scripts, so the spec added contain-intrinsic-block-size and contain-intrinsic-inline-size keywords.
Similarly, contain-intrinsic-width and contain-intrinsic-height were added.
These also allow easily specifying an intrinsic size in only one axis.