Weirdest bug with RadixUI toast + Framer motion
To reproduce:
1. Open a toast by pressing Notify
2. Close it
3. Press on Notify again
Result: Nothing happens unless you press Notify a second time, and when you do 2 toasts are displayed at once.
It only happens at certain zoom out level
what's wrong with the code?
https://codesandbox.io/p/devbox/clever-jerry-pjznz3
11 Replies
Your codesandbox is inaccesible
sorry, updated the link
I can't reproduce the bug, it's works fine. I tried with multiple zoom levels, as you specified
what browser are you using? That could help narrow down the issue
happens on chrome and firefox for me, found this site also using the same component, it happens in here for me too when pressing the button in the preview (following steps provided) at any zoom out level below 100% https://kinetic-kit-3zzy.vercel.app/docs/toast
Grid Section - Kinetic-Kit
A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.
Still works for me (chrome - macos) . Can you share a video of how it looks from your side ?
here an example, the second time i want to show a toast I have to click twice and it displays 2 toasts at once, 90% zoom level
I see the same in my codesandbox
What a weird bug. It only happens when the zoom level is at 90%. I honestly got no idea why. I hope someone else can help
Grid Section - Kinetic-Kit
A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.
it looks like framer motion and Radix are both trying to manage the state of your popups. I would say to remove the line:
<AnimatePresence mode="popLayout" initial={false}>
and the closing tag
</AnimatePresence>
not mine but I found his site through github search and seems he followed the same tutorial as me to build the component
hmm but if I remove AnimatePresence the exit animation won't work