fix(web-components): scope submenu fallback positioning to non-anchor…

… browsers only (#32000)
microsoft · Jul 15, 2024 · 8f7e877 · 8f7e877
1 parent b5fa1fa
commit 8f7e877
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/change/@fluentui-web-components-198bc628-0ffa-41a6-a30f-b159efd70210.json 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
@@ -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`