DropdownMenu scroll on hover misbehaves with scroll-padding
bug
### Describe the bug
I put a dropdown menu in a sticky navbar with `preventScroll={false}`, then I also added a scroll-padding-top on `:root` as is often done. The code looks something like this:
```svelte
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
</script>
<nav class="sticky top-0 mx-auto flex h-(--navbar-height) max-w-xl items-center bg-blue-50 px-5">
<DropdownMenu.Root>
<DropdownMenu.Trigger class="bg-blue-200 px-4 py-2">Open Menu</DropdownMenu.Trigger>
<DropdownMenu.Content preventScroll={false} class="border bg-white">
<DropdownMenu.Item class="px-4 py-2 hover:bg-gray-100">Item 1</DropdownMenu.Item>
<DropdownMenu.Item class="px-4 py-2 hover:bg-gray-100">Item 2</DropdownMenu.Item>
<DropdownMenu.Item class="px-4 py-2 hover:bg-gray-100">Item 3</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</nav>
<main class="mx-auto max-w-xl space-y-6 p-10">
<!-- content here -->
</main>
<style>
:global(:root) {
--navbar-height: 5rem;
scroll-padding-top: var(--navbar-height);
}
</style>
```
This results in viewport scrolling slightly up when hovering over items:
https://github.com/user-attachments/assets/542a5c4e-7b93-4112-afe7-5dbc6cdf1329
To work around this I had to balance the padding by adding a negative scroll-margin (`-scroll-mt-(--navbar-height)`) on the `Content` and every `Item`.
### Reproduction
https://stackblitz.com/edit/vp6mdsbf?file=src%2Froutes%2F%2Bpage.svelte
### Logs
```bash
```
### System Info
```bash
System:
OS: Linux 6.19 Fedora Linux 43 (Workstation Edition)
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 4.98 GB / 15.52 GB
Container: Yes
Shell: 4.2.0 - /usr/bin/fish
Binaries:
Node: 24.13.0 - /home/blt/.local/share/nvm/v24.13.0/bin/node
npm: 11.6.2 - /home/blt/.local/share/pnpm/npm
pnpm: 10.30.2 - /home/blt/.local/share/pnpm/pnpm
bun: 1.3.2 - /home/blt/.bun/bin/bun
Deno: 2.6.8 - /home/blt/.deno/bin/deno
Browsers:
Firefox: 149.0
Firefox Developer Edition: 149.0
npmPackages:
@sveltejs/kit: ^2.57.0 => 2.57.1
bits-ui: ^2.17.3 => 2.17.3
svelte: ^5.55.2 => 5.55.2
```
### Severity
annoyance
关闭于 2026-05-03 1 条评论