update

components/Navbar/NavbarSubMenu.module.css

@@ -105,19 +105,19 @@
     opacity: 0;
     transform: translateY(-8px);
     transition:
-      max-height 300ms ease,
-      opacity 300ms ease,
-      transform 300ms ease,
-      visibility 0s linear 300ms;
+      max-height 200ms ease,
+      opacity 200ms ease,
+      transform 200ms ease,
+      visibility 0s linear 200ms;
     background-color: var(--nav-bg);
   }
 
   .nav-submenu.open {
     transition:
-      max-height 300ms ease,
+      max-height 200ms ease,
       opacity 300ms ease,
       transform 300ms ease,
-      visibility 0s linear 0s;
+      visibility 0s linear 0;
   }
 
   .nav-submenu-list li a:focus-visible {

components/Navbar/NavbarSubMenu.tsx

@@ -37,13 +37,18 @@ export const NavbarSubMenu: FC<Props> = ({
 }) => {
   const pathname = usePathname();
   const subMenuRef = useRef<HTMLUListElement | null>(null);
+  const subMenuInnerRef = useRef<HTMLLIElement | null>(null);
   const isDesktop = useIsDesktop();
 
   const openMenu = () => setOpenSubmenuId(id);
   const closeMenu = () => setOpenSubmenuId(null);
   const toggleMenu = () => setOpenSubmenuId(open ? null : id);
 
-  useHeightVar(subMenuRef, "--submenu-h", "scroll", open);
+  // Measure the inner (unclipped) wrapper, not the ul.nav-submenu that
+  // gets its max-height animated — observing the animated element itself
+  // causes the ResizeObserver to refire on every step of the transition,
+  // which makes the animation stutter in Firefox.
+  useHeightVar(subMenuInnerRef, "--submenu-h", "scroll", open, subMenuRef);
 
   const handleSubmenuClick = (e: MouseEvent<HTMLUListElement>) => {
     const target = e.target as HTMLElement;
@@ -79,7 +84,7 @@ export const NavbarSubMenu: FC<Props> = ({
         ].join(" ")}
         onClick={handleSubmenuClick}
       >
-        <li className={styles["nav-submenu-inner"]}>
+        <li ref={subMenuInnerRef} className={styles["nav-submenu-inner"]}>
           <ul className={styles["nav-submenu-list"]}>
             {items.map((item) => {
               const isActive =