I’m using Material UI’s SwipeableDrawer component to create a bottom drawer with a fixed action button container. The container is positioned with position: fixed; bottom: 0;. This works well on desktop browsers, but I’m encountering an issue on mobile devices.

When the content inside the SwipeableDrawer is long enough to scroll, and I scroll to the bottom and then try to scroll further, the fixed element (the action button container) shifts position and is no longer aligned to the bottom.

Here is example code
and demo video

I’ve tried using position: sticky, but this does not meet my other requirements, so I’m not considering using position: sticky.

Any insights or solutions would be greatly appreciated. Thanks!