I’ve exhausted my brain power as it is 2am, so i’m here to ask if anyone has any solution to this problem that has came to my attention. Im using typescript, framer motion, and tailwind to build a personal portfolio, my fixed bottom navbar has a backdrop blur effect, but that effect seems to be completely removed when anything with some type of animation is behind it.

is there any known fix for this issue?

one element getting blurred while animated element doesnt

Heres my navbar code, there might be a different way to blur that fixes this but im honesty lost, any help is appreciated 🙂

export default function NavBar() {
  return (
    <div className="flex justify-center self-center">
      <div className=" bg-[#6d6d6d] /15 shadow-md shadow-black/[0.03] fixed bottom-20  backdrop-blur-[0.3rem] bg-opacity-20 rounded-2xl h-full w-full max-w-[350px] max-h-[65px] justify-center px-3 flex">
        <ul className="flex items-center justify-center gap-6">
          {links.map((link) => (
            <motion.li
              key={link.hash}
            >
              <Link
                className="hover:text-[#b1afae] transition"
                href={link.hash}
              >
                {link.name}
              </Link>
            </motion.li>
          ))}
        </ul>
      </div>
    </div>
  );
}

I haven’t tried many solutions because I have yet to find any 🙁