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

Merged

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

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.

@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
@radium-v radium-v force-pushed the users/radium-v/dropdown-position-polyfill branch from 2541c45 to e8f3314 Compare June 20, 2025 21:08
@radium-v radium-v enabled auto-merge (squash) June 20, 2025 21:08
@radium-v radium-v merged commit 750d30f into microsoft:master Jun 23, 2025
15 checks passed
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jun 24, 2025
* master: (51 commits)
  release: applying package updates - react v8
  fix(react-charting): Improve legend selection for Scatter charts (microsoft#34701)
  release: applying package updates - web-components
  [fix]: vertical tablist and start and end slots in tabs were broken (microsoft#34704)
  feat: shorten pollDuration to 100ms (microsoft#34703)
  fix(web-components): add dropdown anchor positioning fallback (microsoft#34647)
  React-Carousel: Call emblaApi destroy on unmount (microsoft#34686)
  release: applying package updates - react-components
  feat: improve useSafeZoneArea() hook (microsoft#34677)
  release: applying package updates - react v8
  feat(react-charts): Add support for negative Y values in GVBC (microsoft#34687)
  feat(react-charting): enable wrapping of string x-axis labels in DeclarativeChart + hide overlapping labels based on post-transform width (microsoft#34666)
  feat(react-charts): Add support for negative VSBC (microsoft#34668)
  fix(react-charting): correct bar height rendering for values less than 1 in VSBC (microsoft#34680)
  feat(react-charts): Add support for secondary y axis in cartesian charts (microsoft#34665)
  release: applying package updates - web-components
  fix: progress bar when value is missing in firefox and safari (microsoft#34684)
  release: applying package updates - react v8
  release: applying package updates - web-components
  refactor: use css attr func to calculate progress bar width when supp… (microsoft#34674)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

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