search

rrweb-io / rrweb

record and replay the web
https://www.rrweb.io/
MIT License
16.52k stars 1.41k forks source link

[Bug]: Scrolling in replay slightly behind/delayed #1305

Open econte-sprig opened 1 year ago

econte-sprig commented 1 year ago

Preflight Checklist

What package is this bug report for?

rrweb

Version

2.0.0-alpha.6

Expected Behavior

Scrolling in replays should match the timing of when the user performed the action

Actual Behavior

When viewing a replay, scrolling is slightly delayed. The reason for this is the use of scrollTo with behavior: 'smooth' (as opposed to 'instant'). For example, if the replay event says to scroll to Y coordinate 2000 at timestamp X, then at timestamp X rrweb will call scrollTo({ top: 2000, behavior: 'smooth'}). Because of the smooth scrolling, the iframe will not actually reach coordinate 2000 until some later time, say timestamp X + 200ms.

Usually this is not very noticeable, but with a windowed grid (where rows outside of the view window are removed from the DOM) the entire contents of the grid become invisible when scrolling due to the this bug.

Steps to Reproduce

  1. Create a windowed grid, for example using react-window
  2. Record a replay with rrweb while scrolling rapidly
  3. Observe the grid contents will be invisible while scrolling in the replay. They will again become visible when scrolling stops

Testcase Gist URL

No response

Additional Information

No response

macalinao commented 12 months ago

I'd appreciate a fix for this too-- adding an option to the playerConfig to disable the smooth scroll would be sufficient