phoenix_live_view icon indicating copy to clipboard operation
phoenix_live_view copied to clipboard

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

Open MatteoGauthier opened this issue 1 year ago • 2 comments

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

https://github.com/user-attachments/assets/a5578ced-7b8a-44df-88b8-e4bcb5365d64

Phoenix Framework website

https://github.com/user-attachments/assets/1df85914-7b36-436f-b094-130ff4187436


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

https://github.com/user-attachments/assets/b2e0eb2c-f759-4e0e-a1b9-9ee64f905bbc

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.

https://github.com/user-attachments/assets/5a9a2e99-ed1b-4ca0-bdd9-bc7c8ca41912

Expected behavior

No performance drop on scroll

MatteoGauthier avatar Sep 15 '24 15:09 MatteoGauthier

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?

josevalim avatar Sep 24 '24 15:09 josevalim

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 👍

MatteoGauthier avatar Sep 25 '24 13:09 MatteoGauthier

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!

chrismccord avatar Oct 31 '24 18:10 chrismccord