[css-overscroll] position: sticky elements should not move during overscroll when in stuck state

[atomiks]

Originally made a comment here, but seemed to get lost.

Problem

When combining position: fixed and position: sticky elements together, the latter moves during overscroll despite being in the "stuck" or "fixed" state, causing the issues seen in the demos below. I have noticed this on several sites where elements that should remain together now detach and overlap in undesirable ways when mixing each value.

Demos

Screen.Recording.2023-01-14.at.5.32.46.am.mov

Screen.Recording.2023-01-14.at.5.34.28.am.mov

[jonjohnjohnson]

Not the cleanest solution, but negative margins can be used to "combat" blocks being unstuck from their constrained box offsets during overscroll in webkit/gecko. You just also need to offset the opposing margin to keep the subsequent flow position intact, as well as keep in mind that this compensating opposite margin will affect where the block becomes "unstuck" when reaching the opposing edge of its containing block.

eg

body {
  background: #f99;
  margin: 0;
}
nav {
  height: 10vh;
  background: #9ff;
  position: sticky;
  top: 0;
  margin-top: -100vh;
  margin-bottom: 100vh;
}
main {
  height: 200vh;
  background: #99f;
  border-top: 5vh solid #999;
}