Skip to content

Commit

Permalink
fix: Fix jittering menu issue (#176)
Browse files Browse the repository at this point in the history
  • Loading branch information
soniaklimas committed Feb 12, 2025
1 parent 1cce42f commit 84f313a
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion packages/ui/src/components/navigation-menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,10 @@ const NavigationMenuViewport = ({
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) => (
<div className={cn("center absolute top-full flex w-full justify-center")}>
<NavigationMenuPrimitive.Viewport
/* Removed `data-[state=open]:animate-in` and `data-[state=closed]:animate-out` to fix menu content jittering during animation transitions.
This is based on the GitHub issue: https://github.com/shadcn-ui/ui/issues/1351.*/
className={cn(
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full max-w-screen-lg overflow-hidden rounded-md shadow-2xl",
"origin-top-center bg-popover text-popover-foreground data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full max-w-screen-lg overflow-hidden rounded-md shadow-2xl",
className,
)}
{...props}
Expand Down

0 comments on commit 84f313a

Please sign in to comment.