Drawer Transition In Firefox

[emclaug2]

Describe the bug

There is an issue in the <blui-drawer-layout> component. Swapping between a temporary & persistent layout, while toggling between open and closed state is causing a weird transition in Firefox. See the linked comment.

What is the expected behavior?

Firefox drawer should behave the same as Chome & Safari.

What are the steps to reproduce?

1. Using the Firefox browser, navigate to here: https://blui-angular-showcase.web.app/templates/dashboard
2. Slowly decrease the Window width until the Drawer is dismissed from the screen.
3. Slowly increase the Window width until the Drawer reappears.
4. Observe the animation bug occurs.

Screenshots or links to minimum reproduction example

https://github.com/brightlayer-ui/angular-component-library/pull/438#issuecomment-1137700135

Environment

Firefox Windwos

Anything else to add?

Discovered in #438

[emclaug2]

I've attempted to troubleshoot this issue but with no luck.
Originally I was thinking that maybe an @input was being toggled quickly between two different values open (true/false) or variant (temporary/persistent). This is not the case.