[Bug]: The fluent-dropdown component renders differently in FireFox than in Chromium.

[dvoituron]

Component

Other...

Package version

3.0.0-beta.90

@microsoft/fast-element version

2.0.0-beta.26

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 12.62 GB / 31.71 GB
  Browsers:
    Edge: Chromium (135.0.3179.66), ChromiumDev (136.0.3227.1)
    Internet Explorer: 11.0.26100.1882

Current Behavior

The fluent-dropdown component renders differently in FireFox than in Chromium. The popover that opens does not “stick” to the component when the user scrolls the screen. We are using this component in FluentUI-Blazor v5 lib.

This seems to be due to the overflow-y: auto style present in the div container.

Example using this code: Edge (136.0.3240.4) is on the left and FireFox (137.0.1) is on the right

<div style="height: 500px; margin: 40px; overflow-y: auto; border: solid 1px gray;">
  <fluent-dropdown type="dropdown">
    <fluent-listbox>
      <fluent-option>Red</fluent-option>
      <fluent-option>Green</fluent-option>
      <fluent-option>Blue</fluent-option>
    </fluent-listbox>
  </fluent-dropdown>
  <div style="min-height: 9000px"></div>
</div>

https://github.com/user-attachments/assets/91de259c-ab1a-4160-aedf-4bfdc10e2d92

https://stackblitz.com/edit/typescript-ii4kev97?file=index.html

Expected Behavior

To maintain the same behavior: the menu must be attached to the component while the page is scrolling.

Reproduction

https://stackblitz.com/edit/typescript-ii4kev97

Steps to reproduce

1. Open the sample in Edge and scroll the DIV content
2. Open the sample in Firefox and scroll the DIV content

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

Products/sites affected

https://fluentui-blazor-v5.azurewebsites.net/List/Select

Are you willing to submit a PR to fix?

no

Validations

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

[spmonahan]

@dvoituron Can you add a title please?

[dvoituron]

@dvoituron Can you add a title please?

Hups. Sorry. Done

[chrisdholt]

@radium-v can you take a look here?

[MarvinKlein1508]

@chrisdholt this isn't just specific to the fluent-dropdown component. It behaves the same for every other menu which gets opened. For example in MenuButton, Select, Combobox

[radium-v]

The Dropdown and Combobox components use CSS Anchor Positioning, which isn't fully supported in Firefox and Safari yet (Fluent documentation for using the Oddbird polyfill is here).

Some work is needed to fix compatibility with the polyfill in Dropdown/Combobox, and I expect to have a PR for that today.