[go: up one dir, main page]

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
bramus opened this issue Dec 21, 2020 · 2 comments

Comments

@bramus
Copy link
Contributor
bramus commented Dec 21, 2020

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?

@vmpstr
Copy link
Member
vmpstr commented Jan 5, 2021

See also #5668

@bramus
Copy link
Contributor Author
bramus commented May 7, 2021

Closing this one in favor of #5668, where this is being tackled.

@bramus bramus closed this as completed May 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants