[WIP] Effects: Use requestAnimationFrame timestamp if available

mgol · mgol · commit 03d873c2e2c2 · 2016-07-07T18:07:29.000+02:00
In some environments that support the requestAnimationFrame timestamp callback parameter using it results in smoother animations. Fixes gh-3143
diff --git a/src/effects.js b/src/effects.js
@@ -27,19 +27,29 @@ var
 	rfxtypes = /^(?:toggle|show|hide)$/,
 	rrun = /queueHooks$/;
 
-function raf() {
+function raf( timestamp ) {
 	if ( timerId ) {
 		window.requestAnimationFrame( raf );
-		jQuery.fx.tick();
+		jQuery.fx.tick( timestamp );
 	}
 }
 
+// We need to be using jQuery.now() or performance.now() consistently as they return different
+// values: performance.now() counter starts on page load.
+// Support: IE <10, Safari <8.0, iOS <9, Android <4.4, Node with jsdom 9.4
+function getTimestamp() {
+    if ( window.performance && typeof window.performance.now === "function" ) {
+		return window.performance.now();
+	}
+	return jQuery.now();
+}
+
 // Animations created synchronously will run synchronously
 function createFxNow() {
 	window.setTimeout( function() {
 		fxNow = undefined;
 	} );
-	return ( fxNow = jQuery.now() );
+	return ( fxNow = getTimestamp() );
 }
 
 // Generate parameters to create a standard animation
@@ -626,12 +636,12 @@ jQuery.each( {
 } );
 
 jQuery.timers = [];
-jQuery.fx.tick = function() {
+jQuery.fx.tick = function( timestamp ) {
 	var timer,
 		i = 0,
 		timers = jQuery.timers;
 
-	fxNow = jQuery.now();
+	fxNow = timestamp || getTimestamp();
 
 	for ( ; i < timers.length; i++ ) {
 		timer = timers[ i ];
diff --git a/test/unit/effects.js b/test/unit/effects.js
@@ -17,15 +17,32 @@ QUnit.module( "effects", {
 		this.sandbox = sinon.sandbox.create();
 		this.clock = this.sandbox.useFakeTimers( 505877050 );
 		this._oldInterval = jQuery.fx.interval;
+		this._oldPerformanceNow = window.performance.now;
 		jQuery.fx.step = {};
 		jQuery.fx.interval = 10;
+
+		// Fake performance.now() returning lower values than Date.now()
+		// and that its values are fractional.
+		// Support: IE <10, Safari <8.0, iOS <9, Android <4.4, Node with jsdom 9.4
+		if ( window.performance && typeof window.performance.now === "function" ) {
+			window.performance.now = function() {
+				return Date.now() - 99999.6394;
+			};
+		}
+
 		jQuery.now = Date.now;
 	},
 	teardown: function() {
 		this.sandbox.restore();
 		jQuery.now = Date.now;
 		jQuery.fx.stop();
 		jQuery.fx.interval = this._oldInterval;
+
+		// Support: IE <10, Safari <8.0, iOS <9, Android <4.4, Node with jsdom 9.4
+		if ( window.performance && typeof window.performance.now === "function" ) {
+			window.performance.now = this._oldPerformanceNow;
+		}
+
 		window.requestAnimationFrame = oldRaf;
 		return moduleTeardown.apply( this, arguments );
 	}
