Opening Dropdown hides scrollbar and shifts page layout (fixed button jumps)

[markmacau]

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs/dropdown
• Component name: Dropdown (with DropdownButton / DropdownMenu)

Describe the bug
When using Dropdown for a fixed-position button in the bottom-right corner of the viewport, clicking the trigger causes a visible layout shift:

The vertical scrollbar disappears or reflows while the menu is open.

As a result, the whole page content shifts horizontally, and the fixed button appears to jump to the right when the dropdown opens.

To Reproduce

<div className="fixed bottom-6 right-6 z-40">
  <Dropdown>
    <DropdownButton
      plain
      aria-label="Jump"
      className="flex h-12 w-12 items-center justify-center rounded-full bg-teal-600 text-white"
    >
      <FiArrowDown />
    </DropdownButton>

    <DropdownMenu anchor="top end">
        <DropdownItem href="#">View</DropdownItem>
        <DropdownItem href="#">Edit</DropdownItem>
        <DropdownItem href="#">Export as CSV&hellip;</DropdownItem>
    </DropdownMenu>
  </Dropdown>
</div>

Expected behavior
Opening the dropdown menu should not cause any layout shift. The fixed-position trigger should stay visually in the same place when the menu opens and closes.

Screenshots

Browser/Device (if applicable)

• NextJS v16 app router
• OS: MacOS 15.7.1
• Browser Chrome 142

Additional context
As a workaround, forcing a stable scrollbar on html fixes the issue:

<style jsx global>{`
html {
         overflow-y: scroll;
         scrollbar-gutter: stable;
}
`}</style>