Catalyst Input & Button component glitches within Dialog component

[sahebyuvrajsingh]

What component (if applicable)

• URL for category: https://tailwindui.com/templates/catalyst
• Component name: Input, Button
• Framework: React

Describe the bug When the above-mentioned components are used in the Dialog component, the component's height shifts and glitches. I think it's due to the calc function used within the inline class as mentioned alongside, px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)].

Screenshots

[reinink]

Hey! Thanks so much for reporting this issue.

So the problem here is that we need to include the will-change-transform class to basically instruct the browser to prepare for an upcoming animation.

I've just deployed a fix for this, so you're welcome to re-download the components from the Tailwind UI website, or you can just apply the following fix to the dialog.tsx and alert.tsx files on line 42:

- 'transition duration-100 data-[closed]:data-[enter]:scale-95 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in'
+ 'transition duration-100 will-change-transform data-[closed]:data-[enter]:scale-95 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in'

Hope that helps! 🤙

[sahebyuvrajsingh]

@reinink Excellent, its working great now thanks a lot! 💯

[reinink]

@sahebyuvrajsingh Amazing, glad that solved it for you! 🙌