next: styles get added to body that disable scroll

[bugproof]

Describe the bug

those styles get added to body after closing the drawer which makes it impossible to scroll the page:

right: unset; pointer-events: auto; overflow: hidden;

so when drawer opens overflow:hidden is probably added to body to prevent scrolling the background but it is never cleared when closing the drawer... - correct me if my diagnosis is wrong. This works in svelte 4 version. Vaul pre-release version is completely unusable as a result.

Reproduction

will provide later

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor
    Memory: 18.45 GB / 63.09 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Local\pnpm\pnpm.EXE
    bun: 1.1.31 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/kit: ^2.7.2 => 2.7.2
    bits-ui: ^1.0.0-next.22 => 1.0.0-next.22
    svelte: ^5.0.5 => 5.0.5
    typescript: ^5.6.3 => 5.6.3
    vaul-svelte: ^1.0.0-next.0 => 1.0.0-next.0

Severity

blocking an upgrade

[bugproof]

This might not be an issue with vaul itself but dialog in bits-ui next... https://github.com/huntabyte/bits-ui/commit/07bfcd44722d4b0dbcf1fa25d5932765ed993cd2

this is most likely bugged file : https://github.com/huntabyte/bits-ui/blob/next/packages/bits-ui/src/lib/internal/use-body-scroll-lock.svelte.ts

Interestingly this only happens in drawer. Dialog correctly resets to overflow: hidden auto but vaul stays at overflow:hidden...

[bugproof]

I fixed this in code by doing:

<Drawer.Root bind:open={isOpen} onClose={() => document.body.style.overflow = "hidden auto"} preventScrollRestoration>

There is also some bug with scroll jumping back to the top of the page sometimes when closing the drawer...

[huntabyte]

Would you mind providing a reproduction of this? I'm not able to reproduce it with the docs site (see video below)

https://github.com/user-attachments/assets/0f0467c4-7b37-451b-aa45-2abb5c1c1bd5

[bugproof]

just ran the docs site locally like you and I have this issue are you sure you've updated all packages? (bits-ui specifically) the docs site reproduces this.

https://github.com/user-attachments/assets/c4d48e0c-d594-42b8-9538-af0788ca3f4f

[bugproof]

EDIT: after adding:

"pnpm": {
        "overrides": {
            "svelte": "5.1.0",
            "bits-ui": "1.0.0-next.26"
        }
    }

It started working!! Couple of hours and it turned out to be a dependency issue.

vault-svelte dependencies need to be updated.

For some reason vaul-svelte was still using "bits-ui": "1.0.0-next.15", even if I had "bits-ui": "1.0.0-next.26" installed in my project.

I added this:

"pnpm": {
        "overrides": {
            "svelte": "5.1.0",
            "bits-ui": "1.0.0-next.26"
        }
    }

and everything is fine now (I hope)... so vaul-svelte package needs to update it's dependencies for now above fix works for this. It was driving me nuts.

@huntabyte it's just a matter of updating packages and pushing new version of vaul-svelte... you can close this when it's done.

[drloloto]

For me the bug somehow persists even with manual patching on the lastest 34. It only happens in nested components with overlays. It also only happens if I click the backdrop, if I use the close Button of the Drawer everything works fine. https://github.com/drloloto/shadtest.git