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.

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

Performance issue on overscroll due to the presence of a "scroll" event listener #3429

Closed
MatteoGauthier opened this issue Sep 15, 2024 · 3 comments

Comments

@MatteoGauthier
Copy link

MatteoGauthier commented Sep 15, 2024

Environment

  • Elixir version (elixir -v):
Erlang/OTP 26 [erts-14.2.5] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit] [dtrace]

Elixir 1.17.2 (compiled with Erlang/OTP 26)
  • Phoenix version (mix deps):
1.7.14
  • Phoenix LiveView version (mix deps): 1.0.0-rc.6
  • Operating system: macOS Sonoma 14.5 (23F79) arm64
  • Browsers you attempted to reproduce this bug on (the more the merrier): Arc Browser
{
  "arcVersion" : "1.60.0 (53678)",
  "deviceInfo" : {
    "deviceId" : "Mac15,3",
    "osVersion" : "MacOS Version 14.5 (Build 23F79)"
  },
}

Running with chromium : Chromium Engine Version 128.0.6613.138
  • Does the problem persist after removing "assets/node_modules" and trying again? Yes/no:
    yes

Actual behavior

Several times I've detected a drop in framerate on local phoenix liveview applications and on sites deployed online. The drop in performance occurs during an “overscroll”, when the user uses a touchpad to scroll to the top of the page, a bounce effect is rendered and it is this animation that is slowed down.

When JavaScript is disabled, the issue disappears. The issue happens only on Arc Browser

Phoenix live view websites where the issue is detected :

Elixir Merge

Screen.Recording.2024-09-15.at.16.46.00.mp4

Phoenix Framework website

Screen.Recording.2024-09-15.at.16.55.08.mp4

I've noticed that when a CSS animation or other continuous rendering eliminates this problem

https://github.com/MatteoGauthier/phoenix-live-perf-overscroll-arc-repro.git

Screen.Recording.2024-09-15.at.16.41.56.mp4

I think it's the bindNav method that's causing the problem, as it includes an event listener for the scroll event.
https://github.com/phoenixframework/phoenix_live_view/blob/94c87e1a25b2d25dd34ee80798abb6b961620530/assets/js/phoenix_live_view/live_socket.js#L716C5-L721C7

When this eventListener is disabled the issue disappear.

Screen.Recording.2024-09-15.at.17.02.27.mp4

Expected behavior

No performance drop on scroll

@josevalim
Copy link
Member

Thank you for the report. If it only happens on Arc, then it may an Arc issue first and foremost. Have you tried isolating it and/or reporting it upstream?

@MatteoGauthier
Copy link
Author

Thank you for the report. If it only happens on Arc, then it may an Arc issue first and foremost. Have you tried isolating it and/or reporting it upstream?

Hey @josevalim ! Yes the issue as been reported to the Arc team as well 👍

@chrismccord
Copy link
Member

The only thing we're doing in the scroll listener is setting and resetting a timer, so I don't think there's anything to be done on our side. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants