microsoft
[dev-v5] FluentSelect is broken in Firefox
🐛 Bug Report
The option menus aren't working correctly within Firefox.
💻 Repro or Code Sample
https://fluentui-blazor-v5.azurewebsites.net/List/Select
🤔 Expected Behavior
I expect the menus to open just like in Edge or Chrome.
😯 Current Behavior
Please take a look on this short video: https://www.youtube.com/watch?v=Rsw_2mfEilU
🌍 Your Environment
It works just fine in both Edge and Chrome but not in Firefox.
Weird. This seems to be caused by the overflow-y: auto; of <div class="fluent-layout-item" area="content">
Need investigations
This is a WebComponent issue. I've reported this bug in the associated repo. No further action on our side. https://github.com/microsoft/fluentui/issues/34224
I also wanted to add that there is an issue with both Edge mobile and Safari on iOS. There's also a similar issue with the FluentCombobox with Edge and Safari on iOS. I can open a separate ticket if desired, but my guess is that they are both related.
The FluentUI team proposed this:
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 https://web-components.fluentui.dev/?path=/docs/concepts-developer-polyfilling--docs#css-anchor-positioning
Did you tried that? We will add an option to use this Polyfill in our lib v5
I don't have any code that uses v5 yet. I've just been trying the components out on the website and noticed this issue. Once all the major components get implemented for v5 then I'd be happy to upgrade my codebase to v5 and start testing everything out. Right now there's too many missing components for me to do any testing on v5.
@dvoituron I can confirm that it works now in Firefox as well.
However there is still some strange behaviour with overflowing content. But this seems to be related to the web components itself.
Closing this one as it has been completed. I will open another issue about the overflow in the web components repository.