Skip to content

fix(web-components): add dropdown anchor positioning fallback #34647

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

radium-v
Copy link
Contributor

Previous Behavior

CSS Anchor positioning isn't supported yet in Firefox or Safari, which causes the listbox popup to detach from its parent dropdown.

New Behavior

The dropdown will fallback to a different positioning strategy using events and animation frames if CSS Anchor Positioning isn't supported.

Related Issue(s)

@radium-v radium-v requested a review from a team as a code owner June 13, 2025 06:34
Copy link

github-actions bot commented Jun 13, 2025

📊 Bundle size report

✅ No changes found

Copy link

Pull request demo site: URL

@@ -0,0 +1,7 @@
{
Copy link

@github-actions github-actions bot Jun 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-web-components/Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium_1.png 298 Changed
vr-tests-web-components/MenuList 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - Dark Mode.normal.chromium.png 500 Changed
vr-tests-web-components/MenuList. - RTL.2nd selected.chromium.png 17 Changed
vr-tests-web-components/MenuList. - RTL.normal.chromium_1.png 39082 Changed
vr-tests-web-components/Switch 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Switch. - Dark Mode.normal.chromium_1.png 92 Changed
vr-tests-web-components/TextInput 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/TextInput. - Dark Mode.normal.chromium_1.png 286 Changed

There were 1 duplicate changes discarded. Check the build logs for more information.

Copy link
Contributor

@davatron5000 davatron5000 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. I noticed Safari TP (with anchor positioning) only anchored the overflow scroll popover to block-start. I think we can merge this as-is but watch the space.

I made some notes about being sure to upstream/downstream these sytles changes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Making a note that we'll have to upstream these changes to MAI.

@radium-v radium-v force-pushed the users/radium-v/dropdown-position-polyfill branch from bc8983c to 2541c45 Compare June 16, 2025 18:51
@radium-v radium-v requested a review from marchbox June 16, 2025 19:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

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