update

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 =