[css-sizing-4] [css-contain] Proposal to add `contain-intrinsic-size: auto;` to fix shifting scrollbar problem. · Issue #5815 · w3c/csswg-drafts · GitHub
Skip to content

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

Closed
@bramus

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:

  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. 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?

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions