-
Notifications
You must be signed in to change notification settings - Fork 11.9k
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
[BUG] Animation duration is not consistent across browsers #5329
Comments
This is some of the oldest code in v2 chartjs, so I'll do my best to explain with the caveat that I'm not the original author on this. The original intention was to allow animations to finish in the correct wall clock time, even if it drawing takes more than the time allotted for a single frame. That being said, looking at the current implementation I see a few bugs:
Now, to your proposed solution. I think it's much simpler and I think it achieves the same end result. I would, however, recommend the following change animation.currentStep = Math.floor((Date.now() - animation.startTime) / animation.duration * animation.numSteps); To test this I would recommend the following cases be tested. These may need to be manual tests since they may be hard to write for the CI.
@simonbrunel thoughts? Did I miss something? |
@etimberg There is a problem in this line btw, duration from animationOptions is not propagated: Chart.js/src/core/core.controller.js Line 538 in 2d7f0a4
Should be: I can create a fork with my proposed solution, so you guys can play around yourself. |
@serhii-yakymuk definitely create a branch and open a PR that we can play around with |
Fixed by #5331 |
Closing per the comment above |
Consider this generic example:
https://jsfiddle.net/8g3g3z3u/1/
Expected Behavior
Animation should last for 10 seconds in any browser.
Current Behavior
Chrome, Firefox: ~17 sec animation
IE, MS Edge: ~8 sec animation
Timings have the same relative values for any duration set.
That is kind of problematic for user expirience in different browsers.
Environment
Possible Solution
Looks like the problem is with
frameDuration
variable and whole 'drop frames' logic:Chart.js/src/core/core.animation.js
Line 31 in 4c763bf
I'm wondering if we can just update
addAnimation
function to include these lines:animation.startTime = Date.now();
animation.duration = duration;
And later in
advance
function use them to calculatecurrentStep
:animation.currentStep = (Date.now() - animation.startTime) / animation.duration * animation.numSteps;
animation.currentStep = Math.min(animation.currentStep, animation.numSteps);
I'm playing with this version locally, and it has much better timing.
Maybe I'm missing something important though, why is that 'frame drop' logic relevant?
The text was updated successfully, but these errors were encountered: