Effects: Use requestAnimationFrame timestamp if available

In some environments that support the requestAnimationFrame timestamp callback parameter using it results in smoother animations. Note: the rAF timestamp is using the same API as performance.now() under the hood so they're compatible with each other. However, some browsers support rAF (with a timestamp parameter) but not performance.now() so using them both would introduce an error. This commit stops using rAF in browsers that don't support performance.now(). From all the browsers jQuery supports this only affects iOS <9 (currently less than 5% of all iOS users) which will now not use rAF. Fixes jquerygh-3143 Closes jquerygh-3151
mgol · Oct 12, 2017 · 5664e4f · 5664e4f
1 parent 7037fac
commit 5664e4f
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 38 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -136,6 +136,7 @@ module.exports = function( grunt ) {
  "deprecated",
  "dimensions",
  "effects",
+ "effects-nostubs",
  "event",
  "manipulation",
  "offset",

diff --git a/src/effects.js b/src/effects.js
@@ -9,6 +9,7 @@ define( [
  "./css/adjustCSS",
  "./data/var/dataPriv",
  "./css/showHide",
+ "./effects/support",
 
  "./core/init",
  "./queue",
@@ -18,7 +19,7 @@ define( [
  "./css",
  "./effects/Tween"
 ], function( jQuery, document, rcssNum, rnothtmlwhite, cssExpand, isHiddenWithinTree, swap,
- adjustCSS, dataPriv, showHide ) {
+ adjustCSS, dataPriv, showHide, support ) {
 
 "use strict";
 
@@ -27,24 +28,34 @@ var
  rfxtypes = /^(?:toggle|show|hide)$/,
  rrun = /queueHooks$/;
 
-function schedule() {
+function schedule( timestamp ) {
  if ( inProgress ) {
- if ( document.hidden === false && window.requestAnimationFrame ) {
+ if ( support.smoothAnim && document.hidden === false ) {
  window.requestAnimationFrame( schedule );
  } else {
  window.setTimeout( schedule, jQuery.fx.interval );
  }
 
- 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 ( support.smoothAnim ) {
+ 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
@@ -647,12 +658,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/src/effects/support.js b/src/effects/support.js
@@ -0,0 +1,16 @@
+define( [
+ "../var/support"
+], function( support ) {
+
+"use strict";
+
+// Support: IE <10, Safari <8.0, iOS <9, Android <4.4, Node with jsdom 9.4
+// The rAF timestamp is using the same API as performance.now() under the
+// hood so they're compatible with each other. However, some browsers support rAF
+// (with a timestamp parameter) but not performance.now() so using them both
+// would introduce an error. That's why we use a single support test for both
+// and don't use rAF if performance.now() is not supported.
+support.smoothAnim = !!( window.requestAnimationFrame && window.performance );
+
+return support;
+} );
diff --git a/test/data/effects/matchingTimestamps.html b/test/data/effects/matchingTimestamps.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr" id="html">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Effects: matching timestamps</title>
+</head>
+<body>
+ <script src="../../jquery.js"></script>
+ <script src="../iframeTest.js"></script>
+ <div id="test-div" style="height: 1000px;"></div>
+ <script>
+ //<![CDATA[
+ setTimeout( function () {
+
+ // Handle a timeout.
+ startIframeTest( false, "The test timed out" );
+ }, 5000 );
+
+ var maxNow = 0;
+
+ jQuery( "#test-div" ).animate( {
+ height: '2000px',
+ }, {
+ duration: 300,
+ step: function( now ) {
+ if ( maxNow - now > 100 ) {
+ startIframeTest( false, "Animation is stepping back from " + maxNow + " to " + now );
+ }
+ maxNow = Math.max( now, maxNow );
+ },
+ complete: function() {
+ startIframeTest( true );
+ }
+ } );
+ //]]>
+ </script>
+</body>
+</html>
diff --git a/test/unit/animation.js b/test/unit/animation.js
@@ -5,15 +5,15 @@ if ( !jQuery.fx ) {
  return;
 }
 
-var oldRaf = window.requestAnimationFrame,
- defaultPrefilter = jQuery.Animation.prefilters[ 0 ],
- defaultTweener = jQuery.Animation.tweeners[ "*" ][ 0 ],
- startTime = 505877050;
+var oldSmoothAnim = jQuery.support.smoothAnim;
+var defaultPrefilter = jQuery.Animation.prefilters[ 0 ];
+var defaultTweener = jQuery.Animation.tweeners[ "*" ][ 0 ];
+var startTime = 505877050;
 
 // This module tests jQuery.Animation and the corresponding 1.8+ effects APIs
 QUnit.module( "animation", {
  setup: function() {
- window.requestAnimationFrame = null;
+ jQuery.support.smoothAnim = false;
  this.sandbox = sinon.sandbox.create();
  this.clock = this.sandbox.useFakeTimers( startTime );
  this._oldInterval = jQuery.fx.interval;
@@ -28,7 +28,7 @@ QUnit.module( "animation", {
  jQuery.now = Date.now;
  jQuery.fx.stop();
  jQuery.fx.interval = this._oldInterval;
- window.requestAnimationFrame = oldRaf;
+ jQuery.support.smoothAnim = oldSmoothAnim;
  return moduleTeardown.apply( this, arguments );
  }
 } );

diff --git a/test/unit/effects.js b/test/unit/effects.js
@@ -5,31 +5,47 @@ if ( !jQuery.fx ) {
  return;
 }
 
-var oldRaf = window.requestAnimationFrame,
- hideOptions = {
- inline: function() { jQuery.style( this, "display", "none" ); },
- cascade: function() { this.className = "hidden"; }
- };
+var hideOptions = {
+ inline: function() { jQuery.style( this, "display", "none" ); },
+ cascade: function() { this.className = "hidden"; }
+};
 
 QUnit.module( "effects", {
- setup: function() {
- window.requestAnimationFrame = null;
+ beforeEach: function() {
  this.sandbox = sinon.sandbox.create();
  this.clock = this.sandbox.useFakeTimers( 505877050 );
+
  this._oldInterval = jQuery.fx.interval;
  jQuery.fx.step = {};
  jQuery.fx.interval = 10;
- jQuery.now = Date.now;
+
+ // Simulate rAF using the mocked setTimeout as otherwise we couldn't test
+ // the rAF + performance.now code path.
+ // Support: IE <10, Android <4.4, Node with jsdom 9.4
+ if ( window.requestAnimationFrame ) {
+ this.sandbox.stub( window, "requestAnimationFrame", function( callback ) {
+ return window.setTimeout( callback, jQuery.fx.interval, Date.now() - 99989.6394 );
+ } );
+ }
+
+ // 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" ) {
+ this.sandbox.stub( window.performance, "now", function() {
+ return Date.now() - 99999.6394;
+ } );
+ }
+
+ this.sandbox.stub( jQuery, "now", Date.now );
  },
- teardown: function() {
+ afterEach: function() {
  this.sandbox.restore();
- jQuery.now = Date.now;
  jQuery.fx.stop();
  jQuery.fx.interval = this._oldInterval;
- window.requestAnimationFrame = oldRaf;
  return moduleTeardown.apply( this, arguments );
  }
-} );
+}, function() {
 
 QUnit[ jQuery.find.compile ? "test" : "skip" ]( "sanity check", function( assert ) {
  assert.expect( 1 );
@@ -2588,4 +2604,21 @@ QUnit.test( "jQuery.speed() - durations", function( assert ) {
  jQuery.fx.off = false;
 } );
 
+} );
+
+QUnit.module( "effects-nostubs", function() {
+
+testIframe(
+ "matching timestamp",
+ "effects/matchingTimestamps.html",
+ function( assert, framejQuery, frameWin, frameDoc, success, failureReason ) {
+ assert.expect( 1 );
+
+ assert.ok( success, failureReason );
+ }
+);
+
+} );
+
 } )();
+
diff --git a/test/unit/support.js b/test/unit/support.js
@@ -74,7 +74,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  };
  } else if ( /(msie 10\.0|trident\/7\.0)/i.test( userAgent ) ) {
  expected = {
@@ -92,7 +93,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": false,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  };
  } else if ( /msie 9\.0/i.test( userAgent ) ) {
  expected = {
@@ -110,7 +112,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": false,
  "reliableMarginLeft": true,
- "scrollboxSize": "absolute"
+ "scrollboxSize": "absolute",
+ "smoothAnim": false
  };
  } else if ( /chrome/i.test( userAgent ) ) {
 
@@ -131,7 +134,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  };
  } else if ( /\b(?:9|10)\.\d(\.\d+)* safari/i.test( userAgent ) ) {
  expected = {
@@ -149,7 +153,8 @@ testIframe(
  "pixelPosition": false,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  };
  } else if ( /firefox/i.test( userAgent ) ) {
  expected = {
@@ -167,7 +172,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": true,
  "reliableMarginLeft": false,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  };
  } else if ( /iphone os (?:9|10)_/i.test( userAgent ) ) {
  expected = {
@@ -185,7 +191,8 @@ testIframe(
  "pixelPosition": false,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  };
  } else if ( /iphone os 8_/i.test( userAgent ) ) {
  expected = {
@@ -203,7 +210,8 @@ testIframe(
  "pixelPosition": false,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": false
  };
  } else if ( /iphone os 7_/i.test( userAgent ) ) {
  expected = {
@@ -221,7 +229,8 @@ testIframe(
  "pixelPosition": false,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": false
  };
  } else if ( /android 4\.[0-3]/i.test( userAgent ) ) {
  expected = {
@@ -239,7 +248,8 @@ testIframe(
  "pixelPosition": false,
  "radioValue": true,
  "reliableMarginLeft": false,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": false
  };
  }
 

diff --git a/test/unit/tween.js b/test/unit/tween.js
@@ -5,11 +5,11 @@ if ( !jQuery.fx ) {
  return;
 }
 
-var oldRaf = window.requestAnimationFrame;
+var oldSmoothAnim = jQuery.support.smoothAnim;
 
 QUnit.module( "tween", {
  setup: function() {
- window.requestAnimationFrame = null;
+ jQuery.support.smoothAnim = false;
  this.sandbox = sinon.sandbox.create();
  this.clock = this.sandbox.useFakeTimers( 505877050 );
  this._oldInterval = jQuery.fx.interval;
@@ -22,7 +22,7 @@ QUnit.module( "tween", {
  jQuery.now = Date.now;
  jQuery.fx.stop();
  jQuery.fx.interval = this._oldInterval;
- window.requestAnimationFrame = oldRaf;
+ jQuery.support.smoothAnim = oldSmoothAnim;
  return moduleTeardown.apply( this, arguments );
  }
 } );