-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
base: master
Are you sure you want to change the base?
fix(web-components): add dropdown anchor positioning fallback #34647
Conversation
📊 Bundle size report✅ No changes found |
Pull request demo site: URL |
@@ -0,0 +1,7 @@ | |||
{ |
There was a problem hiding this comment.
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.
There was a problem hiding this 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.
There was a problem hiding this comment.
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.
bc8983c
to
2541c45
Compare
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)