[menu] Highlight is slow

[vladmoroz]

I can feel a delay when moving through the items with the mouse:

https://github.com/user-attachments/assets/67707aa4-9d4f-408f-95f6-9360e0f14f8d

Radix:

https://github.com/user-attachments/assets/5d14aeaf-cd23-4f18-8352-0d763b3dcfb1

[atomiks]

Looks more pronounced in Safari in dev mode - in Chrome using React dev mode, it's speedy even with 4-6x slowdown, and Safari seems ok (but not as good) in prod mode.

To solve this fully even with long lists, useListNavigation needs to offer DOM highlights (activeIndex change) without any re-renders, which has to go through React's diffing/memo comparisons of each item before highlighting. There may be some other optimizations to make as well. This is not fully trivial so I removed it from the first alpha milestone but is solvable soon

@michaldudak, maybe you could look into possible optimizations in the meantime? I think this also affects Select

[michaldudak]

I'm happy to try to optimize it, but likely after I'm back from my PTO (in January)

[atomiks]

I've created an experiment here https://github.com/mui/base-ui/pull/1128 (demo) and the Base UI Menu highlights are much faster on Safari in the experiments' "isolated" context. This, along with it being so different to Chrome, suggests that something in the docs' CSS may be causing a perf slowdown in Safari specifically?

[atomiks]

It turns out this is caused by our auto-modality pointer-events: none, which "scales" negatively in terms of performance the larger the page is. Chrome is unaffected, but Safari/Firefox are.

That method also isn't fully robust for modality, as the parent that receives it could be visually collapsed compared to any children (as what happened with the side nav).

We'll need to find an alternative (probably the internal backdrop idea, or a runtime error if Backdrop is missing).