Closed FearlessSlug closed 4 months ago
can't repro on ios, used both chrome and safari
can't repro on ios, used both chrome and safari
What version of iOS? I reproduced this on a couple of iOS 15.X iPhones...
I'm not sure if there's any plan to add more sophisticated (and heavier) libraries for animations so there's no point in making a PR to switch tailwindcss-animate
for FramerMotion
for these problematic components, so I'll put a couple of links that helped me replicate the same animation but with FramerMotion (IMO the animations turned out to be even smoother with FramerMotion on both desktop and mobile)
Toast:
Sheet:
open
state or at least listen to the Sheet
's onOpenChange
event and provide the current open
state to the SheetContent
component which is not a big deal IMOisMobile
boolean to isBottom
like so: const isBottom = side === "bottom";
(side
is the variant of the sheet that already exists in the SheetContent
component) so now the default side is right and I can also set it to bottom, I don't care for left or top so I didn't implement for those options but it's pretty easy and straightforwardThis issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.
ShadcnUI is using tailwindcss-animate which has a bug with the animation lagging/bugging out on mobile devices both IOS and Android, this means that every single component that uses tailwindcss-animate lib has this broken animation in some form, it is most noticable (and most painful) in the sheet component like in the video as well as in the toast component also in the video.
It seems like in tailwindcss-animate repo there's an issue opened since last year with no plans on fixing this bug tailwindcss-animate/issues/47
https://github.com/shadcn-ui/ui/assets/134693517/8008cffc-bccb-40b6-803f-17a80e5ccd51