[csswg-drafts] [css-position] Clarify whether sticky-positioned elements can cause scrollbars to remain when a tall thing is removed

dholbert has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-position] Clarify whether sticky-positioned elements can cause scrollbars to remain when a tall thing is removed ==
(Spec reference: https://drafts.csswg.org/css-position/#sticky-pos )

tl;dr: When a sticky-positioned thing with "top:0" is visible within a scrolled-down scrollable element, and then the scrollable overflow area is shrunk such that scrollbars are no longer necessary: should the sticky positioned element (which is positioned inside the prior overflow area) remain at the same position and continue to "prop up" the scrollable element's scroll position?

Consider this testcase:
 https://bugzilla.mozilla.org/attachment.cgi?id=8979827

This testcase has a fixed-height scrollable element (`height: 200px`), which contains:
 (1) a tall element (`height: 500px`) which creates 300px of overflow (and hence, scrollbars)
 (2) a sticky-positioned element that has `top:0;height:100%`.

When the page is loaded, the scrollable area is scrolled to the end (`scrollTop=300`).

Then, after a short delay, the tall element is removed, so that *nothing is causing overflow in the scrollable area anymore, besides the sticky-positioned element.  (This sticky element doesn't have to create overflow, but it kind of still does, by virtue of having a residual sticky position, and because the scrollbar hasn't been moved since it got this sticky position.)

At that point, **what should happen**?

 - Safari resets the scrollable element to `scrollTop=0`.
 - Edge, and Chrome all leave the scrollable element at the same scrolled position, despite the fact that there's no longer any tall children creating the need for it to be scrollable.  (The sticky-positioned child is left at its residual position in the container's overflow area, and is left as the thing "propping up" the scrollbar, so to speak.)
 - Firefox is a bit schizophrenic -- it agrees with Chrome and Edge on this testcase, but agrees with Safari on [variants where the sticky-positioned thing is 1px smaller](https://bugzilla.mozilla.org/attachment.cgi?id=8982586).

I don't think the spec really makes it clear which behavior is correct right now, so I'm not sure which behavior is correct & in which direction we should resolve Firefox's schizophrenic behavior. Could the spec be clarified on this point?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2794 using your GitHub account

Received on Monday, 18 June 2018 17:29:33 UTC