phoenixframework / phoenix_live_view

Rich, real-time user experiences with server-rendered HTML
https://hex.pm/packages/phoenix_live_view
MIT License
6.14k stars 919 forks source link

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

Open MatteoGauthier opened 2 weeks ago

MatteoGauthier commented 2 weeks ago

Environment

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://elixirmerge.com/) 

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

[Phoenix Framework website](https://www.phoenixframework.org/)

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
josevalim commented 1 week ago

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 commented 6 days ago

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 👍