[menu] Performance issues and bugs in sub-menus #3774
Description
Slow and buggy sub-menus
Current behavior
- Hovering over multiple sub menu triggers is very sluggish under certain conditions (higher cpu load)
- Sometimes when hovering across sub menu triggers one of them opens, even though the cursor is already over a different sub trigger. When that happens hovering over any item in the same menu doesn't close the sub menu, because all items have
pointer-events: none;
Example from our app with no CPU throttling:
Screen.Recording.2026-01-16.at.13.45.40.mov
Example in /experiments/menu/ with 6x CPU throttling:
Screen.Recording.2026-01-16.at.13.34.17.mov
Expected behavior
- Better performance when hovering across many sub menu triggers
- When sub menu trigger opens its submenu, moving the cursor to another item or sub-menu trigger should close that sub menu.
Reproducible example
- create a Menu with 10 sub-menus, each with 20 items inside
- set CPU throttling in Devtools to 6x
- move your cursor around the menu up and down at different speeds. you should notice sluggishness with the hover/highlight effect and at some point one of the sub menus will open even though the cursor is no longer on its trigger
Base UI version
1.0.0
Which browser are you using?
Chrome
Which OS are you using?
Mac OS
Which assistive tech are you using (if applicable)?
N/A
Additional context
-
I think there's lots of
getBoundingClientRectaction going on on mouse move withflushSyncand bunch oftimeoutscausing big CPU spikes, forced layouts and style recalcs. -
Some race condition which causes wrong sub menu to open and prevent hover on other menu items