[Dialog] When `overlay-position="fixed"` and `menu-open` is present the menu is not positioned as-expected

[geospatialem]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

When overlay-position="fixed" and menu-open is present the menu is not positioned as-expected:

Expected Behavior

The menu should be placed as-expected on the component (where it is initially loaded):

Reproduction Sample

https://codepen.io/geospatialem/pen/ZEdLWNZ

Reproduction Steps

1. Open the sample
2. Observe the menu opens as-expected
3. However, it is repositioned in a different location

Reproduction Version

2.11.0-next.25

Relevant Info

Spurred from https://github.com/Esri/calcite-design-system/issues/7886 QA/QC

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Impact

No response

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)

[driskull]

This appears to be a an issue with the transform animation on the dialog. If we remove that, it works fine.

The issue is that having a transform animation with a floating-ui element inside of it can cause positioning issues.

Some notes about it can be read here: https://floating-ui.com/docs/usefloating#transform

In our case, a wrapper won't work because the floating ui element is inside of the transform animation.

As a workaround, I could disable the animation if the menu-open attribute is present. WDYT @jcfranco?

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍡 Verified locally on dev