[Bug]: Dropdown position is wrong when it is being used in dialogs in Firefox

[MarvinKlein1508]

Component

Other...

Package version

3.0.0-rc.14

@microsoft/fast-element version

2.10.4

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (28) x64 Intel(R) Core(TM) i7-14700K
    Memory: 3.38 GB / 31.78 GB
  Browsers:
    Edge: Chromium (146.0.3856.97)
    Firefox: 149.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
    Firefox Developer Edition: 150.0 - C:\Program Files\Firefox Developer Edition\firefox.exe

Current Behavior

The dropdown in Firefox is positioned wrong and has a wrong width.

This issue is related to microsoft/fluentui-blazor#4750

Expected Behavior

I expect the drop down to appear the same as in Edge & Chrome

Reproduction

https://stackblitz.com/edit/typescript-xmpagnan?file=index.html,index.ts

Steps to reproduce

1. Open stackblitz in Firefox
2. Click Open Dialog
3. Click on the dropdown

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[MarvinKlein1508]

I would like to add that I have seen the Polyfill section in the docs
https://storybooks.fluentui.dev/web-components/?path=/docs/concepts-developer-polyfilling--docs

But according to compatibilty list this should work out of the box because I'm using Firefox 149 and beta 150.