Drawer animation using JS show() on <el-dialog> does not animate smoothly on Firefox or Safari

[EscVelocity1]

What component (if applicable)

• URL for category: https://tailwindcss.com/plus/ui-blocks/documentation/dialog
• Component name: el-dialog

Describe the bug
Using the javascript-invoked show() method on the el-dialog HTML-version produces shaky animations on Firefox and mis-aligned animations on Safari with drawer component. I've tried 10 different implementations including calling the show() method when the drawer is simply on the DOM, after content is loaded, loading the drawer dynamically, using an event listener, using a delay, requestAnimationFrame, and others and I haven't yet seen a smooth animation.

To Reproduce
Steps to reproduce the behavior:

1. Call show() on the HTML element in javascript using Safari or Firefox
2. Watch janky animation

Expected behavior
I expect the show() method on the HTML el-dialog element to smoothly animate the drawer onto the page across all browsers in a way that is well documented to avoid any confusion around how best to call it to avoid a poor UX.

Screenshots
See videos

Browser/Device (if applicable)

• OS: MacOS 15.6.1
• Browser: Safari v18.6, Firefox v142.0

Additional context

Safari.Drawer.Show.Animation.mov

Firefox.Drawer.Show.Animation.mov

[RobinMalfait]

Hmm that's annoying 🤔

Are the transitions also janky when you visit: https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/drawers

For me they are smooth there on Firefox and Safari, which makes me wonder if it might be related to something else on your page.
Another potential problem I can think of is if you are using the CDN version where the necessary classes are generated too late, causing janky behavior. But if you are using Elements, then all classes are immediately available so that shouldn't be a problem. I also can't reproduce it with the CDN and a drawer example locally.

Can you share a minimal reproduction repo, or add me to a private repo so we can try and see what the root cause of this is?

[RobinMalfait]

Hey @EscVelocity1! Going to close this one for now since we haven't heard back, and we can't reproduce this on our end, but if you are still running into this problem, feel free to provide us with a reproduction and we'd be happy to have a closer look 👍