[dev-v5] FluentMenu opening on wrong position in Firefox

[MarvinKlein1508]

🐛 Bug Report

The FluentMenu does not work properly in Firefox.

Edge:

Firefox:

💻 Repro or Code Sample

Latest FluentMenu demo in v5 branch.

🤔 Expected Behavior

I expect the menu to open at the same positions as in Edge.

😯 Current Behavior

The menu opens somewhere else

💁 Possible Solution

It works for me in Firefox on https://storybooks.fluentui.dev/web-components/?path=/docs/components-menu--docs

So perhaps we need to update the packages.

🔦 Context

🌍 Your Environment

Latest firefox
Latest Edge
Latest v5 version
.NET 10

[dvoituron]

This is a well-known issue: https://storybooks.fluentui.dev/web-components/?path=/docs/concepts-developer-polyfilling--docs

https://caniuse.com/css-anchor-positioning

[boukenka]

According to Firefox Nightly 146.0a1, See All New Features, Updates and Fixes, the release notes for Firefox Nightly 146.0a1 mention that “CSS anchor positioning” has been added

[dvoituron]

Yes, like explained in the caniuse site: Can be enabled using the layout.css.anchor-positioning.enabled flag. Enabled by default in Firefox Nightly only

[vnbaaij]

This is on latest Firefox Developer with the flag enaled:

So confirmed that is working then. Closing this one.

[MarvinKlein1508]

@vnbaaij but why does it work for me in their story book without any additional flags? https://storybooks.fluentui.dev/web-components/?path=/docs/components-menu--docs

[dvoituron]

@vnbaaij but why does it work for me in their story book without any additional flags? https://storybooks.fluentui.dev/web-components/?path=/docs/components-menu--docs

Because the website uses the Polyfill scripts

[MarvinKlein1508]

@dvoituron can't we use them as well?