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

Timeline jumps vertically due to height of non-visible groups being calculated incorrectly. #1676

Open
YoshiWalsh opened this issue Sep 4, 2023 · 0 comments · May be fixed by #1677
Open

Comments

@YoshiWalsh
Copy link
Contributor

YoshiWalsh commented Sep 4, 2023

Steps to reproduce:

  1. Open this reprex codepen
  2. Using the mousewheel, scroll the timeline vertically. Observe that while scrolling up or down, the timeline scrolls at a consistent speed as expected.
  3. Using the mousewheel, scroll down until you're at around the "Task 12" group.
  4. By clicking and dragging on the timeline, scroll horizontally a few pixels. Observe that the timeline jumps and now you're looking at ~"Task 84".
  5. Slowly scroll back up the page. Observe that once you get to around "Task 25", scrolling leaps in large bounds, it's no longer smooth.
  6. Once back to the top of the timeline, try scrolling diagonally down. Observe that the scrolling experience is not at all smooth.

Cause:

  1. Group._updateItemsInRange sets this.visibleItems to [] if the group itself is not visible.
  2. Group._calculateHeight only operates on this.visibleItems, and if there are no such items it will set the height to this.props.label.height, which can be significantly smaller than the stacked height of items.

Possible solutions:

  1. Have Group._calculateHeight bail if the group is not visible, assuming the height is unchanged. If the timeline is scrolled horizontally far enough that the items within the visible range change, there will still be a jump when the group becomes visible again, but this only happens when the user scrolls up.
  2. Have Group._updateItemsInRange return the items that are horizontally within range even if the group is offscreen. This will reduce performance by restacking items for off-screen groups. As items on off-screen groups enter and exit the visible range, the timeline may jump considerably due to all their heights changing off-screen.

I suggest option #1. I think the current design means that some amount of jumping is inevitable when the screen is scrolled horizontally, since the height of the groups is changing. I think with option #1 these jumps will have less of an impact on the user experience. It will also maintain the current performance. I have future changes that I'm planning which will further lessen this impact.

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

Successfully merging a pull request may close this issue.

1 participant