Navigation Menu view port glitching

[ryendu]

Hi there, I'm using NavigationMenu to create a top menu bar for my web app. It works but it glitches on hover as shown in this video. I'm using tailwindcss and I can't figure out how to fix this glitch.

Screen.Recording.2023-08-02.at.1.43.55.PM.mov

Here's a snippet of my code:

   <div className="flex justify-end">
        <NavigationMenuPrimitive.Root className="relative ">
          <NavigationMenuPrimitive.List className="flex  flex-row rounded-lg bg-white dark:bg-gray-800 p-2 space-x-2">
            {schema.map((item) => (
              <>
                {isNavItemGroup(item) ? (
                  <NavigationMenuPrimitive.Item>
                    <NavigationMenuPrimitive.Trigger
                      className={clsx(
                        "px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900",
                        "font-medium",
                        "text-gray-700 dark:text-gray-100",
                        "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
                      )}
                    >
                      {item.title}
                    </NavigationMenuPrimitive.Trigger>
  
                    <NavigationMenuPrimitive.Content
                      className={clsx(
                        "absolute w-auto top-0 left-0 rounded-xl bg-gray-1",
                        "radix-motion-from-start:animate-enter-from-left",
                        "radix-motion-from-end:animate-enter-from-right",
                        "radix-motion-to-start:animate-exit-to-left",
                        "radix-motion-to-end:animate-exit-to-right"
                      )}
                    >
                      <div className="min-w-32 p-2 flex flex-col">
                        {item.items.map((link, index) => (
                          <NavigationMenuPrimitive.Link
                            href={link.href}
                            className={`py-2 px-2 border-b ${
                              index != item.items.length &&
                              "border-gray-6 text-gray-11"
                            }`}
                          >
                            {link.title}
                          </NavigationMenuPrimitive.Link>
                        ))}
                      </div>
                    </NavigationMenuPrimitive.Content>
                  </NavigationMenuPrimitive.Item>
                ) : (
                  <NavigationMenuPrimitive.Item asChild>
                    <NavigationMenuPrimitive.Link
                      href={item.href}
                      className={clsx(
                        "px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900",
                        "font-regular text-gray-11 dark:text-gray-100"
                      )}
                    >
                      {item.title}
                    </NavigationMenuPrimitive.Link>
                  </NavigationMenuPrimitive.Item>
                )}
              </>
            ))}
  
            <NavigationMenuPrimitive.Indicator
              className={clsx(
                "z-10 relative",
                //   "top-[100%] flex items-end justify-center h-2 overflow-hidden",
                "radix-state-visible:animate-fade-in",
                "radix-state-hidden:animate-fade-out",
                "transition-[width_transform] duration-[250ms] ease-[ease]"
              )}
            >
              <div className="top-1 relative shadow bg-gray-1 dark:bg-gray-800 w-2 h-2 rotate-45 left-1/2" />
              <NavigationMenuPrimitive.Viewport
                className={clsx(
                  " absolute shadow-lg rounded-md bg-white dark:bg-gray-800 overflow-hidden glitch",
                  "w-radix-navigation-menu-viewport",
                  "h-radix-navigation-menu-viewport",
                  "radix-state-open:animate-scale-in-content",
                  "radix-state-closed:animate-scale-out-content",
                  "origin-[top_center] transition-[width_height] duration-1200 ease-[ease]"
                )}
              />
            </NavigationMenuPrimitive.Indicator>
          </NavigationMenuPrimitive.List>
        </NavigationMenuPrimitive.Root>
      </div>