[Positioner] Not all sticky and positionMethod combos make sense

[vladmoroz]

Finally got to test sticky and positionMethod options thoroughly:

https://p8xtr7.csb.app/
https://codesandbox.io/p/sandbox/postion-method-sticky-combos-p8xtr7

Testing in Safari on a M1 Pro device:

Props	static container	fixed container
positionMethod="absolute" sticky={false}	Perfect	Skips frames badly
positionMethod="absolute" sticky={true}	Skips frames badly	Skips frames badly
positionMethod="fixed" sticky={false}	Skips frames mildly	Perfect*
positionMethod="fixed" sticky={true}	Skips frames mildly	Perfect*

* Note: in fixed containers, sticky value has no effect

Screen.Recording.2024-12-20.at.16.41.12.mov

Chrome is better, as it skips fewer frames (but exactly in the same ways).
Firefox is similar/worse.

Effectively, there seems to be two combinations that make sense:

• positionMethod="absolute" sticky={false}
  • Works great in a static container
• positionMethod="fixed" sticky={true}
  • Works great in a fixed container
  • Works OK in a static container to achieve a sticky positioner

Am I missing the use cases for the rest?

• positionMethod="fixed" sticky={false}
  • In static containers: just like positionMethod="absolute" sticky={false}, but worse because it can skip frames
  • In fixed containers: exactly like positionMethod="fixed" sticky={true}
• positionMethod="absolute" sticky={true}
  • In static containers: skips frames when running up the edge
  • In fixed containers: skips frames all the time

If not missing any use cases, it looks like this API can be reduced to a single boolean prop or a single string prop with two values.

---

One more thing to consider is that it might be viable to implement a different positioning strategy for a better sticky popup experience in a static container: use position absolute while the element is attached to the trigger and switch to position fixed when it attaches to the edge of the viewport. This way, the only opportunity to skip frames would be during the position change, and not during the rest of the scroll events.

[atomiks]

this API can be reduced to a single boolean prop or a single string prop with two values.

Something like positionMethod="sticky", which dynamically switches between the two absolute and fixed states, is something I've thought about in Floating UI. But because their clipping ancestors can be different, it causes glitches/loops under certain conditions when the position property changes between them as it keeps switching back/forth when entering the new positioning context. If the popup is always portaled, this concern is way less of an issue and can be viable though I think.