Page jumps to top when opening the drawer

[OrenMag]

Loom:

https://www.loom.com/share/c146667a27774baebbcebeeb6985313f

Seems like the top of body is set to 0 upon opening (as well as right, left and position fixed)

vaul version: 0.9.0

Couldn't create reproducible sandbox

[LouisGS44]

Same here, version 0.9.0

[maiconcarraro]

I believe the problem can be related to this line:

vaul/src/use-prevent-scroll.ts

Line 260 in a30da7d

window.scrollTo(0, 0);

I'm only facing this issue for Iphone devices, not Androids

[Orestli]

Any updates?

[OrenMag]

Is this planned to be fixed?

[michael-convertdigital]

i'm experiencing the same issue in remix, it seems to happen randomly, maybe every 3rd or 4th close of the drawer

[joaom00]

Can you create a reproducible example?

[emilkowalski]

Couldn't create reproducible sandbox

This proves that this is a tough issue to fix. I'd love to fix it, but without a consistent reproduction I could only guess as to what is causing the problem. Removing window.scrollTo(0, 0) might help potentially, but it'll break other stuff.

[maiconcarraro]

This proves that this is a tough issue to fix. I'd love to fix it, but without a consistent reproduction I could only guess as to what is causing the problem. Removing window.scrollTo(0, 0) might help potentially, but it'll break other stuff.

Hi @emilkowalski , thank you for replying to this issue, at least for my situation it only happens for iOS devices + combining two drawers, the issue happens in a consistent way to me, here's the link for sandbox: https://codesandbox.io/p/devbox/shadcn-playground-forked-gfm4rj

It only happens when testing through iOS devices, it won't work emulating Chrome DevTools w/ iOS user-agent.

Here's a video showing it:

repro.mp4

It could be a race condition with the restoring position fixed + opening the second, let me know if you prefer that I open a new issue because it's a little bit different from the original comment.

I don't have the same issue when using radix-dialog alone (no vaul), or when using android devices.

[levitatejay]

It only happens when testing through iOS devices, it won't work emulating Chrome DevTools w/ iOS user-agent.

Your repro is reliable for me, I toggle Chrome dev tools and the iPhone view setting and I'm unable to open the drawer

Do you know a workaround? I've had to disable the drawer because it won't work with window virtual scrolling on mobile

[levitatejay]

I fixed this in my project by upgrading to v0.9.1 and adding noBodyStyles and preventScrollRestoration={false}