Skip to content

[BUG] Animation duration is not consistent across browsers #5329

Description

@serhii-yakymuk

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

  • Chart.js version: 2.7.2
  • OS: Windows 10

Possible Solution

Looks like the problem is with frameDuration variable and whole 'drop frames' logic:

frameDuration: 17,

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 calculate currentStep:

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?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions