md-menu flashes while closing

[shadow-identity]

What is affected?

Component, Other/unknown

Description

When I close md-menu it starts disappearing animation, then just when it is done, it shows an empty menu for a couple of frames and then it is finally gone.

Especially annoying if the menu is big enough

Reproduction

1. Go to https://material-web.dev/components/menu/#properties (or any other page with the menu)
2. Click on any example button to show the menu example
3. Click outside of the menu
4. Note the flash (this doesn't always happen, but most often)

It could be visible on this recording: https://share.firefox.dev/3V93LGL 1.490s: menu almost transparent 1.491s (next frame): menu is fully opaque again 1.51s (next frame): menu finally disappeared.

Workaround

Disable animation with quick property

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

reproducable on 1.2.0, 1.3.0

Browser/OS/Node environment

Firefox 124.0b8 (64-bit), macOS 14.4 (23E214)

[asyncLiz]

I wasn't able to reproduce this in Firefox 123 on macOS 14.3.1. Does it happen outside of the catalog or on https://material-web.dev/components/menu/stories/?

I can't see the visuals with the stack trace posted, can you post a screen recording video?

[shadow-identity]

Hey, I also can not reproduce it on FF 123. On FF 124 it does happen outside of the catalog (I noticed it on my local dev server of my project), it also happens on stories/. I double-checked it with Troubleshoot mode ON, meaning that all the extensions and other stuff are off. I just reproduced the same problem on <md-*-select>, I attached the recording. You can catch a frame with the problem just after the menu is almost gone.

https://github.com/material-components/material-web/assets/1223112/878e6ddf-6e6e-4b87-8af2-f96bbd693c23

The screenshot of the frame

BTW <md-*-select> examples on https://material-web.dev/components/select/#usage seems to be broken in FF 123:

https://github.com/material-components/material-web/assets/1223112/4321c6a1-e9ff-4bd2-ba3f-4a0429722a19

[asyncLiz]

I'd stick with testing https://material-web.dev/components/select/stories/ since the inline demos may be introducing other problems.

Does it happen in all three menu positioning options in FF 124? If absolute or fixed work, it could be an issue with new popover apis that FF is working on.

[shadow-identity]

I tried all three positioning options, the bug is reproducible on all of them on FF 124 (neither is reproducible on FF 123).

BTW the menuPositioning select on FF works only from keyboard. It closes immediately after it is being open on both FF 123 and FF 124.