search

cschroeter / park-ui

Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.
https://park-ui.com
MIT License
1.75k stars 75 forks source link

Scrollbar causing layout shift in dialog full screen #407

Open juliomuhlbauer opened 3 months ago

juliomuhlbauer commented 3 months ago

https://github.com/user-attachments/assets/e7739691-c1f3-40c2-8d80-0c633613d465

Repo: https://github.com/juliomuhlbauer/park-ui/blob/dialog/templates/react/next-js/src/app/dialog/page.tsx

juliomuhlbauer commented 3 months ago

The scrollbar take time to hide when the dialog is animating. So for example: when the dialog has a scrollbar within itself, it shows 2 scrollbars in the screen when the dialog is opening and a flicker after.

juliomuhlbauer commented 3 months ago

Setting overflow to hidden in the Positioner seems to work. I think the problem is the default animation of Dialog. It slides from outside of the screen when the dialog is full screen