bug: page scrolls when some components are closed after opening them

[DarthGigi]

Describe the bug

When some components (in the video the DropdownMenu component is used) are closed after being opened and you have scrolled on a page, it makes the page scroll to the top and back to where you were.

This behaviour isn't quite noticeable when scroll-behavior: smooth; isn't set, however, it does still happen.

Weirdly, the Popover component does not trigger this behavior.

This also only happens on iOS Safari (and other webkit-based browsers on iOS) and doesn't happen (in normal and responsive modes) on desktop browsers, including macOS Safari.

https://github.com/huntabyte/shadcn-svelte/assets/47110839/d6c0a5ff-fb7f-43c2-b0f4-d0b25ffc8f43

Reproduction

https://github.com/DarthGigi/shadcn-safari-mvce

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 715.43 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - /usr/local/opt/node@20/bin/node
    npm: 10.5.2 - /usr/local/opt/node@20/bin/npm
    pnpm: 9.1.1 - /usr/local/bin/pnpm
    bun: 1.1.8 - /usr/local/bin/bun
  Browsers:
    Brave Browser: 125.1.66.110
    Chrome: 125.0.6422.61
    Safari: 17.5

Severity

annoyance

[DarthGigi]

I'm gonna bump this issue with this comment if that's ok

[ieedan]

I'm currently having this same issue in one of my applications but not specifically with Safari.

For some reason I can't reproduce it with your repro.

In my case preventScroll was not working. I am not exactly sure why this fixed it but I removed the following from my global css file:

html {
   overflow-x: hidden;
}

Now my scroll properly locks.

However... now it does something weird

https://github.com/user-attachments/assets/570e66ee-f0d5-4076-afbc-32f4d48780a4

When I hover an item the page gradually scrolls up, super weird. Similarly when I close the menu the scroll unlocks (as expected) and then rockets me back to the top of the page as you have shown. I'd like to emphasize I never scrolled up in the video.

I would love a second opinion on this. This issue probably belongs in bits-ui.

[DarthGigi]

This issue probably belongs in bits-ui.

I agree, I just made a new repo using only bits-ui, and the issue (at least mine) is still there: https://github.com/DarthGigi/bitsui-safari-mvce

This issue should probably be transferred to the bits-ui repository instead.

[ieedan]

Is your repro still working only for safari or does it work for you on chromium?

[DarthGigi]

@ieedan The bug is only present on mobile Safari. On macOS Safari, Chromium-based browsers, and Firefox it works fine.

[babakfp]

This may be related:

https://github.com/user-attachments/assets/522f2bda-7454-491a-8eca-ddc30dbed4ef

When I scroll down/up and the calendar goes out of view (and it's still open), I click outside, and the calendar gets closed, and the page position jumps to the position of the calendar.

[DarthGigi]

@babakfp What exactly are you showcasing? That the dropdown is changing positions when you scroll?

If so that’s intentional behavior from Floating UI: https://floating-ui.com/docs/flip.

It can be turned on or off with the avoidCollisions property: https://www.bits-ui.com/docs/components/dropdown-menu

[babakfp]

What exactly are you showcasing?

When I scroll down/up and the calendar goes out of view (and it's still open), I click outside, and the calendar gets closed, and the page position jumps to the position of the calendar.

[huntabyte]

Can you still reproduce this using bits-ui@next and shadcn-svelte@next ?

[DarthGigi]

I couldn't reproduce the bug with Svelte 5, bits-ui and shadcn-svelte next

[huntabyte]

Amazing!