Navigation Menu animation broken in examples in Firefox

[Studio384]

Docs feedback

How can we improve Base UI documentation?

On Firefox 145, the animations when opening the Navigation Menu appear to be broken.

20251204-1409-09.2969515.mp4

20251204-1409-46.3444664.mp4

[mj12albert]

The same weird animation occurs here too: https://master--base-ui.netlify.app/react/components/popover#animating-the-popover

Possibly something to do with Viewport?

[atomiks]

Firefox doesn't respect transition: 'none' on Positioner during the phase it gets positioned to go from 0 to the positioned value:

Chrome/Safari both respect it properly.

A workaround here is to wait until after mount to remove disabled transitions:

<NavigationMenu.Positioner
  style={{ transition: undefined }}
  ref={(el) => {
    if (el) {
      el.style.transition = 'none';
      setTimeout(() => {
        el.style.transition = '';
      });
    }
  }}
>

This seems like a regression from an earlier version (likely from #3250), as it happened to work because top/left weren't getting set to 0 initially due to a logic bug, which inadvertently masked this issue (where it doesn't match Chrome/Safari)

[github-actions]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui-components/react@3424