Shadcn - Drawer - Vaul - flashing after closing Drawer
Hello,
I'm currently working on a project where I use shadcn-ui and I am trying to integrate a drawer (referred to as "vaul") with a carousel component ("embla-carousel"). I'm encountering an issue where parts of the content briefly flash when I close the drawer. This seems to happen primarily on iPhones.
The drawer is built on top of a radix-ui dialog, but I'm uncertain what causes the flashing. It might be related to a CSS variable affecting the content in some way, though I'm not sure. Interestingly, I observe the same issue even in the documentation. (https://ui.shadcn.com/docs/components/drawer)
Is there a CSS expert who could guide me on what might be causing this problem and how to fix it?
Thank you for any insights or suggestions!
Important links:
https://github.com/emilkowalski/vaul
https://ui.shadcn.com/docs/components/drawer
https://www.embla-carousel.com/
https://www.radix-ui.com/primitives/docs/components/dialog
2 Replies
I think this is due to the overlay. Try messing around with the overlay styles to achieve a different way of getting the greyed out background.
I tried to remove overlay and still not working.