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

Point hover animation flicker since 2.9.0 #6614

Closed
emmcb opened this issue Oct 27, 2019 · 7 comments
Closed

Point hover animation flicker since 2.9.0 #6614

emmcb opened this issue Oct 27, 2019 · 7 comments
Milestone

Comments

@emmcb
Copy link
Contributor

emmcb commented Oct 27, 2019

Expected Behavior

When moving the mouse on a line chart, we should have a smooth animation on point hover.

Current Behavior

The animation flickers a lot when moving the mouse while triggering new animations at the same time. By looking at the behavior it seems that the first animation restarts at the beginning each time a new animation starts, explaining the flicker.

Steps to Reproduce (for bugs)

Can be reproduced on https://www.chartjs.org/samples/latest/scales/time/financial.html
Put the mouse cursor on a line point, then move the mouse left along the line. You will notice that the first hovered point flickers instead of disappearing smoothly.

Context

Started right after I upgraded to 2.9.0. I saw that #6129 was introduced in 2.9.0, so this bug was probably here before, but masked because there was no animation.

Environment

  • Chart.js version: 2.9.0
  • Browser name and version: Chromium 78, Linux
@benmccann
Copy link
Contributor

Animations are actually disabled on that sample:

animation: {
  duration: 0
},

@emmcb
Copy link
Contributor Author

emmcb commented Oct 27, 2019

Does the point hover animation uses the same animation system that other animations in chart ? Because when I enter and leave the mouse cursor on a line point I did see the point appearing and disappearing with animation.

Are you able to reproduce what I discribed on this sample ?

@benmccann
Copy link
Contributor

Yes, it does use the same animation system.

No, I don't notice anything particularly jarring in the financial sample you linked to

@emmcb
Copy link
Contributor Author

emmcb commented Oct 27, 2019

Ok maybe it is a bit hard to see this when you do not know exactly what to look for, so I made a small screen record of the issue: (compressed as a zip because github upload does not seem to support uploading video files directly)

simplescreenrecorder-2019-10-27_17.43.02.zip

@benmccann
Copy link
Contributor

I actually discovered that there are multiple animation options. See the docs here: #6643. You may try options.hover.animationDuration

@kurkle
Copy link
Member

kurkle commented Oct 30, 2019

I've noticed this issue also. By making the hoverAnimationDuration long, it becomes really noticeable:
(it works right, if you wait the complete 5 seconds before hovering next item)

https://codepen.io/kurkle/pen/dyyVVxm?editors=1010

@kurkle
Copy link
Member

kurkle commented Jan 1, 2020

Fixed by #6845

@kurkle kurkle closed this as completed Jan 1, 2020
@etimberg etimberg added this to the Version 3.0 milestone Jan 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants