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 gh-3143 Closes gh-3151
jquery · Apr 23, 2019 · 30e6b8a · 30e6b8a
1 parent b8d4712
commit 30e6b8a
Show file tree

Hide file tree

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

diff --git a/src/effects.js b/src/effects.js
@@ -11,6 +11,7 @@ define( [
  "./css/adjustCSS",
  "./data/var/dataPriv",
  "./css/showHide",
+ "./effects/support",
 
  "./core/init",
  "./queue",
@@ -20,7 +21,7 @@ define( [
  "./css",
  "./effects/Tween"
 ], function( jQuery, camelCase, document, isFunction, rcssNum, rnothtmlwhite, cssExpand,
- isHiddenWithinTree, swap, adjustCSS, dataPriv, showHide ) {
+ isHiddenWithinTree, swap, adjustCSS, dataPriv, showHide, support ) {
 
 "use strict";
 
@@ -29,24 +30,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 Date.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 Date.now();
+}
+
 // Animations created synchronously will run synchronously
 function createFxNow() {
  window.setTimeout( function() {
  fxNow = undefined;
  } );
- return ( fxNow = Date.now() );
+ return ( fxNow = getTimestamp() );
 }
 
 // Generate parameters to create a standard animation
@@ -649,12 +660,12 @@ jQuery.each( {
 } );
 
 jQuery.timers = [];
-jQuery.fx.tick = function() {
+jQuery.fx.tick = function( timestamp ) {
  var timer,
  i = 0,
  timers = jQuery.timers;
 
- fxNow = Date.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,14 +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", {
  beforeEach: function() {
+ jQuery.support.smoothAnim = false;
  this.sandbox = sinon.createSandbox();
  this.clock = this.sandbox.useFakeTimers( startTime );
  this._oldInterval = jQuery.fx.interval;
@@ -26,7 +27,7 @@ QUnit.module( "animation", {
  this.sandbox.restore();
  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,29 +5,42 @@ 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", {
  beforeEach: function() {
  this.sandbox = sinon.createSandbox();
  this.clock = this.sandbox.useFakeTimers( 505877050 );
+
  this._oldInterval = jQuery.fx.interval;
- window.requestAnimationFrame = null;
  jQuery.fx.step = {};
  jQuery.fx.interval = 10;
+
+ // Simulate rAF using the mocked setTimeout as otherwise we couldn't test
+ // the rAF + performance.now code path.
+ this.sandbox
+ .stub( window, "requestAnimationFrame" )
+ .callsFake( 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.
+ this.sandbox.stub( window.performance, "now" ).callsFake( function() {
+ return Date.now() - 99999.6394;
+ } );
  },
  afterEach: function() {
  this.sandbox.restore();
  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 );
@@ -2630,4 +2643,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
@@ -73,7 +73,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  },
  ie_10_11: {
  "ajax": true,
@@ -90,7 +91,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": false,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  },
  ie_9: {
  "ajax": true,
@@ -107,7 +109,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": false,
  "reliableMarginLeft": true,
- "scrollboxSize": false
+ "scrollboxSize": false,
+ "smoothAnim": false
  },
  chrome: {
  "ajax": true,
@@ -124,7 +127,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  },
  safari: {
  "ajax": true,
@@ -141,7 +145,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  },
  safari_9_10: {
  "ajax": true,
@@ -158,7 +163,8 @@ testIframe(
  "pixelPosition": false,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  },
  firefox: {
  "ajax": true,
@@ -175,7 +181,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  },
  firefox_60: {
  "ajax": true,
@@ -192,7 +199,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": true,
  "reliableMarginLeft": false,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  },
  ios: {
  "ajax": true,
@@ -209,7 +217,8 @@ testIframe(
  "pixelPosition": true,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  },
  ios_9_10: {
  "ajax": true,
@@ -226,7 +235,8 @@ testIframe(
  "pixelPosition": false,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": true
  },
  ios_8: {
  "ajax": true,
@@ -243,7 +253,8 @@ testIframe(
  "pixelPosition": false,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": false
  },
  ios_7: {
  "ajax": true,
@@ -260,7 +271,8 @@ testIframe(
  "pixelPosition": false,
  "radioValue": true,
  "reliableMarginLeft": true,
- "scrollboxSize": true
+ "scrollboxSize": true,
+ "smoothAnim": false
  },
  android: {
  "ajax": true,
@@ -277,7 +289,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,22 +5,22 @@ if ( !jQuery.fx ) {
  return;
 }
 
-var oldRaf = window.requestAnimationFrame;
+var oldSmoothAnim = jQuery.support.smoothAnim;
 
 QUnit.module( "tween", {
  beforeEach: function() {
+ jQuery.support.smoothAnim = false;
  this.sandbox = sinon.createSandbox();
  this.clock = this.sandbox.useFakeTimers( 505877050 );
  this._oldInterval = jQuery.fx.interval;
- window.requestAnimationFrame = null;
  jQuery.fx.step = {};
  jQuery.fx.interval = 10;
  },
  afterEach: function() {
  this.sandbox.restore();
  jQuery.fx.stop();
  jQuery.fx.interval = this._oldInterval;
- window.requestAnimationFrame = oldRaf;
+ jQuery.support.smoothAnim = oldSmoothAnim;
  return moduleTeardown.apply( this, arguments );
  }
 } );