Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Page jumps to top when opening the drawer #318

Open
OrenMag opened this issue Apr 4, 2024 · 11 comments
Open

Page jumps to top when opening the drawer #318

OrenMag opened this issue Apr 4, 2024 · 11 comments

Comments

@OrenMag
Copy link

OrenMag commented Apr 4, 2024 •
edited

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
@OrenMag OrenMag changed the title Jumps to top when opens drawer - Body top set to 0 Page jumps to top when opening the drawer Apr 5, 2024
@LouisGS44
Copy link

Same here, version 0.9.0

@maiconcarraro
Copy link
Sponsor

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

@OrenMag OrenMag mentioned this issue Apr 8, 2024
Closed
@Orestli
Copy link

Orestli commented Apr 12, 2024

Any updates?

@OrenMag
Copy link
Author

OrenMag commented Apr 17, 2024

Is this planned to be fixed?

@michael-convertdigital
Copy link

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

@joaom00
Copy link
Contributor

joaom00 commented May 6, 2024

Can you create a reproducible example?

@emilkowalski
Copy link
Owner

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
Copy link
Sponsor

maiconcarraro commented May 7, 2024 •
edited

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
Copy link

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

image

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

@levitatejay
Copy link

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

@joshuafranks
Copy link

joshuafranks commented May 28, 2024 •
edited

Also having this issue on iOS devices when opening a second drawer. It seems to have something to do with <body> styles being applied incorrectly. I can't talk with too much authority as I haven't dug into the source code, but anecdotally, drawers that are not affected apply these styles to <body>:

right: 0px; position: fixed !important; top: -424px; left: 0px; height: auto; pointer-events: none;

But affected drawers apply these styles to <body> instead:

right: unset; pointer-events: none;

If you go into web inspector and add those styles manually, the drawer will return to the expected position.

Validated this through the iOS 17.4 simulator on Sonoma 14.3. Safari doesn't seem to like it whereas other browsers handle the behaviour without any observable issues.

EDIT: to be clear, the scenario is:

  • Drawer A is opened (in my case, using the open prop and controlling state through a Context)
  • Drawer A has right: 0px; position: fixed !important; top: -424px; left: 0px; height: auto; pointer-events: none; set on <body>
  • Drawer A is closed and Drawer B is opened immediately after via a button click in Drawer A
  • Drawer B has right: unset; pointer-events: none; set on <body>

This definitely feels like a race condition – presumably in the setPositionFixed callback logic – because if I wrap the state change in a setTimeout callback with a 5000ms delay, it opens without any issues. I'm on holiday at the moment so I don't have time to clone the repo and debug locally, but a cursory scan of the codebase suggests that the callback may be the culprit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@levitatejay @maiconcarraro @LouisGS44 @joshuafranks @emilkowalski @joaom00 @Orestli @OrenMag @michael-convertdigital