diff --git a/change/@fluentui-web-components-198bc628-0ffa-41a6-a30f-b159efd70210.json b/change/@fluentui-web-components-198bc628-0ffa-41a6-a30f-b159efd70210.json new file mode 100644 index 00000000000000..a2766086254f12 --- /dev/null +++ b/change/@fluentui-web-components-198bc628-0ffa-41a6-a30f-b159efd70210.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: scope menu fallback positioning to non-anchor browsers only", + "packageName": "@fluentui/web-components", + "email": "rupertdavid@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts index 3e3ec52b4666ef..835e93f6841738 100644 --- a/packages/web-components/src/menu-item/menu-item.styles.ts +++ b/packages/web-components/src/menu-item/menu-item.styles.ts @@ -151,7 +151,6 @@ export const styles = css` } ::slotted([popover]) { - align-self: start; /* Fallback for no anchor-positioning */ inset-area: inline-end span-block-end; margin: 0; max-height: var(--menu-max-height, auto); @@ -168,6 +167,13 @@ export const styles = css` ::slotted([popover]:popover-open) { inset: unset; } + + /* Fallback for no anchor-positioning */ + @supports not (anchor-name: --menu-trigger) { + ::slotted([popover]) { + align-self: start; + } + } } `.withBehaviors( forcedColorsStylesheetBehavior(css`