[css-overflow] Ability to ignore specific descendants when generating scrollbars

[LeaVerou]

Problem: Positioned box "decorations": ribbons, complex shadows (that require pseudo-elements) and other ornamental elements or pseudo-elements. causing scrollbars to be generated when they should be ignored when scrollbars are calculated.

E.g. for the ribbon here I had to use position: fixed and JS to hide it when the page is scrolled.

And in other cases even position: fixed doesn't help, and the decoration still generates scrollbars, with no straightforward workaround (complex workarounds include wrappers with overflow: hidden and fragile sizing).

Perhaps a property that basically says "ignore this element when calculating scrollbars", which would only apply to positioned elements only, syntax TBB. @fantasai @frivoal thoughts?

[ydaniv]

Another common use case is for content that's animated into view when it's fold enters the viewport. So if that element would naturally be expected not to generate scrollbars, it may generate them on the beginning of the animation, and avoiding it in a generic way is a hassle, and requires fixing the problem outside the element's scope. So another interesting point is if it could be animatable discrete.

[LeaVerou]

Another common use case is for content that's animated into view when it's fold enters the viewport. So if that element would naturally be expected not to generate scrollbars, it may generate them on the beginning of the animation, and avoiding it in a generic way is a hassle, and requires fixing the problem outside the element's scope. So another interesting point is if it could be animatable discrete.

Thank you, I have come across this quite a lot as well!

[johannesodland]

I’ve often come across the same issue.

In some cases workarounds such as overflow: hidden and contain: paint can’t be used. That happens when the elements are transformed in a 3d context. overflow:hidden can’t be used as it is a grouping property that forces preserve-3d: flat.

I’ve tried to suggest a method to prevent elements from contributing to scrollable overflow area here: https://github.com/w3c/csswg-drafts/issues/8361

[tabatkins]

Yeah, this appears to be a dupe of #8361, which came in slightly earlier. @LeaVerou, mind closing this in favor of the other issue?