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 · Apr 29, 2019 · f089df5 · f089df5
1 parent cf84696
commit f089df5
Show file tree

Hide file tree

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

diff --git a/src/effects.js b/src/effects.js
@@ -18,8 +18,8 @@ define( [
  "./manipulation",
  "./css",
  "./effects/Tween"
-], function( jQuery, document, rcssNum, rnothtmlwhite, cssExpand,
- isHiddenWithinTree, swap, adjustCSS, cssCamelCase, dataPriv, showHide ) {
+], function( jQuery, document, rcssNum, rnothtmlwhite, cssExpand, isHiddenWithinTree,
+ swap, adjustCSS, cssCamelCase, dataPriv, showHide ) {
 
 "use strict";
 
@@ -28,24 +28,31 @@ var
  rfxtypes = /^(?:toggle|show|hide)$/,
  rrun = /queueHooks$/;
 
-function schedule() {
+function schedule( timestamp ) {
  if ( inProgress ) {
- if ( document.hidden === false && window.requestAnimationFrame ) {
+ if ( 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() {
+ return window.performance.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
@@ -645,12 +652,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/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,10 +5,9 @@ if ( !jQuery.fx ) {
  return;
 }
 
-var oldRaf = window.requestAnimationFrame,
- defaultPrefilter = jQuery.Animation.prefilters[ 0 ],
- defaultTweener = jQuery.Animation.tweeners[ "*" ][ 0 ],
- startTime = 505877050;
+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", {
@@ -26,7 +25,6 @@ QUnit.module( "animation", {
  this.sandbox.restore();
  jQuery.fx.stop();
  jQuery.fx.interval = this._oldInterval;
- window.requestAnimationFrame = oldRaf;
  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 );
@@ -2621,4 +2634,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/tween.js b/test/unit/tween.js
@@ -5,22 +5,18 @@ if ( !jQuery.fx ) {
  return;
 }
 
-var oldRaf = window.requestAnimationFrame;
-
 QUnit.module( "tween", {
  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;
  },
  afterEach: function() {
  this.sandbox.restore();
  jQuery.fx.stop();
  jQuery.fx.interval = this._oldInterval;
- window.requestAnimationFrame = oldRaf;
  return moduleTeardown.apply( this, arguments );
  }
 } );