[Bug] ActionMenu still scrolls if in sticky container

[dipree]

Description

ActionMenu always has position: absolute. When in a container that is sticky it will consequently not stick with the container but with the absolute position. So, when scrolling it goes weeee 🚀

Steps to reproduce

Put ActionMenu in a sticky container and scroll. For example, the table of content for the README in our repo https://github.com/github/primer, trigger the ActionMenu, than scroll.

Version

36.27.0

Browser

No response

[joshblack]

Can confirm, when scrolling it goes weeee 🚀 (😂)

@dipree we were taking a look at this during our maintainer sync and wanted to check-in to understand where this issue came from (did you happen to see this yourself or was it user reported?)

We're trying to see where this fits among our issues in terms of priority 👀

[Akashgite1]

please assign to me

[dipree]

@dipree we were taking a look at this during our maintainer sync and wanted to check-in to understand where this issue came from (did you happen to see this yourself or was it user reported?)

It has been reported in the past for the mentioned README toc, but I'm not sure anymore where that was unfortunately. I was just recently reminded of this again when putting an ActionMenu in a sticky header.

[Akashgite1]

The behavior you're describing occurs because position: absolute positions the element relative to its nearest positioned ancestor. In a sticky container, if there's no such ancestor, the element will be positioned relative to the document, which can cause it to move unexpectedly when scrolling.