[Bug]: Picker content unexpectedly renders its content above when inside of an overlay on mobile

[najikahalsema]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Picker, Overlay, Tray

Expected behavior

When inside of an overlay, the picker menu items will render above the picker (and not necessarily right above; can be placed to the side). When closing the picker content, sometimes you can see a flash of the items at the bottom of the screen before it closes completely.

we are seeing this behavior when this overlay fix is included. when we remove it from the build, we no longer see it. another bug from this overlay fix is a tray failing to open.

Actual behavior

The picker items should either render below the picker or in a tray so that the content is easily accessible.

Screenshots

No response

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

1. How can we reproduce this issue?
2. Go to https://studio.webcomponents.dev/edit/bAxHQqSHMHh9PkI2hnUQ/src/index.ts?p=stories
3. Click on the Trigger button
4. Click on the picker

Sample code or abstract reproduction which illustrates the problem

No response

Severity

SEV 3

Logs taken while reproducing problem

No response