search

namespace-ee / react-calendar-timeline

A modern and responsive react timeline component.
MIT License
1.94k stars 634 forks source link

Jitter when scrolling horizontally with trackpad #811

Open loicboset opened 3 years ago

loicboset commented 3 years ago

First of all, thanks a lot for this great timeline!

Describe the bug When scrolling left and right with a trackpad on a timeline with a bit of data, the headers do not follow correctly and the calendar looks shaky.

To Reproduce Scroll with trackpad - see video

https://user-images.githubusercontent.com/24396771/115146619-8cd06a80-a057-11eb-8f80-dde39c7dcf1b.mov

Expected behavior When scrolling by click and dragging, it works fine. Same if I hold MAJ while scrolling with the trackpad. That would be the expected behaviour when scrolling only with two fingers on the trackpad.

Library Version "react-calendar-timeline": "^0.27.0",

Desktop (please complete the following information):

Is there a way to either fix this or to deactivate the horizontal scroll with the trackpad?

Thank you!

Ilaiwi commented 3 years ago

@loicboset this is due to the windowing we do in the library. We use an internal buffer. You can maybe add a prop to control the buffer and increase it. If it didn't work I would recommend using @beta since it's performance is much better than the master version (it has breaking changes though)

loicboset commented 3 years ago

@Ilaiwi thank you for coming back to me! I'll try that and let you know

JustinmClapperton commented 2 years ago

Im having a similar issue but for us the headers get completely out of sync. Im also on version "react-calendar-timeline": "^0.27.0",

https://user-images.githubusercontent.com/5769149/159497534-888223e8-541c-4656-b456-2df31a5856d4.mov

What prop can we use to control the buffer? I have tried beta and it does seem to resolve the headers getting out of sync as in video above but it feels very clunky.

fpaupier commented 1 year ago

Im having a similar issue but for us the headers get completely out of sync. Im also on version "react-calendar-timeline": "^0.27.0", scrolling_issue.mov

What prop can we use to control the buffer? I have tried beta and it does seem to resolve the headers getting out of sync as in video above but it feels very clunky.

Hey @JustinmClapperton, I have the same issue, did you find a workaround for the de-synchronization of header and columns ?