Make animation duration consistent across browsers (#5331)

src/core/core.animations.js

@@ -14,9 +14,7 @@ defaults._set('global', {
 });
 
 module.exports = {
-	frameDuration: 17,
 	animations: [],
-	dropFrames: 0,
 	request: null,
 
 	/**
@@ -30,6 +28,8 @@ module.exports = {
 		var i, ilen;
 
 		animation.chart = chart;
+		animation.startTime = Date.now();
+		animation.duration = duration;
 
 		if (!lazy) {
 			chart.animating = true;
@@ -79,19 +79,8 @@ module.exports = {
 	 */
 	startDigest: function() {
 		var me = this;
-		var startTime = Date.now();
-		var framesToDrop = 0;
 
-		if (me.dropFrames > 1) {
-			framesToDrop = Math.floor(me.dropFrames);
-			me.dropFrames = me.dropFrames % 1;
-		}
-
-		me.advance(1 + framesToDrop);
-
-		var endTime = Date.now();
-
-		me.dropFrames += (endTime - startTime) / me.frameDuration;
+		me.advance();
 
 		// Do we have more stuff to animate?
 		if (me.animations.length > 0) {
@@ -102,7 +91,7 @@ module.exports = {
 	/**
 	 * @private
 	 */
-	advance: function(count) {
+	advance: function() {
 		var animations = this.animations;
 		var animation, chart;
 		var i = 0;
@@ -111,7 +100,7 @@ module.exports = {
 			animation = animations[i];
 			chart = animation.chart;
 
-			animation.currentStep = (animation.currentStep || 0) + count;
+			animation.currentStep = Math.floor((Date.now() - animation.startTime) / animation.duration * animation.numSteps);
 			animation.currentStep = Math.min(animation.currentStep, animation.numSteps);
 
 			helpers.callback(animation.render, [chart, animation], chart);

src/core/core.controller.js

@@ -509,22 +509,24 @@ module.exports = function(Chart) {
 				};
 			}
 
-			var duration = config.duration;
+			var animationOptions = me.options.animation;
+			var duration = typeof config.duration !== 'undefined'
+				? config.duration
+				: animationOptions && animationOptions.duration;
 			var lazy = config.lazy;
 
 			if (plugins.notify(me, 'beforeRender') === false) {
 				return;
 			}
 
-			var animationOptions = me.options.animation;
 			var onComplete = function(animation) {
 				plugins.notify(me, 'afterRender');
 				helpers.callback(animationOptions && animationOptions.onComplete, [animation], me);
 			};
 
-			if (animationOptions && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration === 'undefined' && animationOptions.duration !== 0))) {
+			if (animationOptions && duration) {
 				var animation = new Animation({
-					numSteps: (duration || animationOptions.duration) / 16.66, // 60 fps
+					numSteps: duration / 16.66, // 60 fps
 					easing: config.easing || animationOptions.easing,
 
 					render: function(chart, animationObject) {

test/specs/core.controller.tests.js

@@ -1122,7 +1122,7 @@ describe('Chart', function() {
 			expect(this.addAnimationSpy).toHaveBeenCalledWith(
 				this.chart,
 				jasmine.objectContaining({easing: 'linear'}),
-				undefined,
+				500,
 				undefined
 			);
 		});