Shoelace: Drawer fails to animate when appearing in Firefox and Chrome

[igorvanoostveen]

Drawer fails to animate when appearing in Firefox and Chrome.
Closing the drawer does show the animation.
Animation works as expected in Microsoft Edge.

To reproduce

1. Go to url: https://shoelace.style/components/drawer
2. Click button labeled 'Open Drawer'.
3. Observe drawer appearing but not animating in Firefox (every time) or not animating the first time in Chrome (later clicks will animate the drawer).
4. Close drawer: in both Firefox and Chrome the drawer will animate.

Expected behavior
Drawer slides in when it appears.

Desktop (please complete the following information):

• OS: Windows 10
• Browsers: Chrome (84.0.4147.89), Firefox (78.0.2), Firefox nightly (80.0a1)

Screenshot

[claviska]

This is odd. I can replicate it on shoelace.style but not locally.

I'll investigate. Thanks!

[claviska]

Fixed in c755735e03c7a703a4ca0e0fde0be6ec38be9ae2.

You can preview the changes here: https://next.shoelace.style/components/drawer

[igorvanoostveen]

@claviska: WOW! Quick fix!

It looks good now in Chrome and Firefox.
Sidenote: In Firefox Nightly there is a flash of the overlay being shown before properly sized. Probably due to the beta nature... :)

[claviska]

This has also been fixed in dialog and other [future] components that utilize the internal popover utility. I pushed next to master so the website updates, since it's getting tons of traffic from Hacker News, but these fixes will be available in the beta beta release.