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

Incredibly laggy performance on androids. #306

Open
shrihari-prakash opened this issue Mar 22, 2024 · 4 comments
Open

Incredibly laggy performance on androids. #306

shrihari-prakash opened this issue Mar 22, 2024 · 4 comments

Comments

@shrihari-prakash
Copy link

First of all, very nice component. The interactions are very natural. However, when I tried the component on a mid range android phone, I was quite shocked by the frame rate that the drawer opens. See here a sample:

vaul.mp4

You can see all the other animations in the app are lightning fast and smooth except for the drawer. Matter of fact, the recording looks smoother than how I experienced it in person. I am not sure if everyone using the component is testing it only on top of the line phones. Even on pixels, there is frame drops. Am I missing an option or something that could make the situation better? The app is totally unusable on androids because of this. I know building such components are not easy, yet I just want to bring this to notice.
@emilkowalski
Copy link
Owner

Please provide a demo with reproduction.

@cervantes-x
Copy link
Contributor

cervantes-x commented May 3, 2024 •
edited

I am experiencing the same issue and only on Android devices. Any update on this?

Edit: it is worse when setting shouldScaleBackground to true

@cervantes-x
Copy link
Contributor

I'm not sure if this is considered a correct solution but at least as a workaround it helped a lot to add willChange: "transform" to the element that has the vaul-drawer-wrapper data attribute. In my case:

      <body
        style={{ willChange: "transform" }}
        vaul-drawer-wrapper=""
        className={cn(fontClasses)}
      >
        ...
      </body>

I also added it to the <Drawer.Overlay />:

  <Drawer.Overlay
    style={{
      willChange: "transform",
    }}
  />

@shrihari-prakash
Copy link
Author

shrihari-prakash commented May 4, 2024 •
edited

Hello @cervantes-x ,
Thanks a lot for sharing your findings. Unfortunately for me though, even setting the willChange property does not help :(. But what I am noticing though is it's slow only on Mediatek devices specifically. Qualcomm devices have only a slight frame drop. This happens even with basic usage of the drawer. So it might be hard to reproduce for @emilkowalski without an actual device.

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
3 participants
@shrihari-prakash @emilkowalski @cervantes-x