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

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
@@ -646,12 +657,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 ];

src/effects/support.js

@@ -0,0 +1,15 @@
+define( [
+ "../var/support"
+], function( support ) {
+
+"use strict";
+
+// Support: Safari 8 only
+// In Safari 8 documents created via document.implementation.createHTMLDocument
+// collapse sibling forms: the second one becomes a child of the first one.
+// Because of that, this security measure has to be disabled in Safari 8.
+// https://bugs.webkit.org/show_bug.cgi?id=137337
+support.smoothAnim = !!( window.requestAnimationFrame && window.performance );
+
+return support;
+} );

test/unit/animation.js

@@ -6,6 +6,7 @@ if ( !jQuery.fx ) {
 }
 
 var oldRaf = window.requestAnimationFrame,
+ oldPerformance = window.performance,
  defaultPrefilter = jQuery.Animation.prefilters[ 0 ],
  defaultTweener = jQuery.Animation.tweeners[ "*" ][ 0 ],
  startTime = 505877050;
@@ -14,6 +15,7 @@ var oldRaf = window.requestAnimationFrame,
 QUnit.module( "animation", {
  setup: function() {
  window.requestAnimationFrame = null;
+ window.performance = null;
  this.sandbox = sinon.sandbox.create();
  this.clock = this.sandbox.useFakeTimers( startTime );
  this._oldInterval = jQuery.fx.interval;
@@ -29,6 +31,7 @@ QUnit.module( "animation", {
  jQuery.fx.stop();
  jQuery.fx.interval = this._oldInterval;
  window.requestAnimationFrame = oldRaf;
+ window.performance = oldPerformance;
  return moduleTeardown.apply( this, arguments );
  }
 } );

test/unit/effects.js

@@ -13,20 +13,50 @@ var oldRaf = window.requestAnimationFrame,
 
 QUnit.module( "effects", {
  setup: function() {
- window.requestAnimationFrame = null;
  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;
+
+ // 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 ) {
+ window.requestAnimationFrame = function( callback ) {
+ return window.setTimeout( callback, jQuery.fx.interval );
+ };
+ }
+
+ // 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;
- window.requestAnimationFrame = oldRaf;
+
+ // Support: IE <10, Android <4.4, Node with jsdom 9.4
+ if ( window.requestAnimationFrame ) {
+ window.requestAnimationFrame = oldRaf;
+ }
+
+ // 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;
+ }
+
  return moduleTeardown.apply( this, arguments );
  }
 } );

test/unit/support.js

@@ -74,7 +74,8 @@ testIframe(
  "pixelMarginRight": true,
  "pixelPosition": true,
  "radioValue": true,
- "reliableMarginLeft": true
+ "reliableMarginLeft": true,
+ "smoothAnim": true
  };
  } else if ( /(msie 10\.0|trident\/7\.0)/i.test( userAgent ) ) {
  expected = {
@@ -91,7 +92,8 @@ testIframe(
  "pixelMarginRight": true,
  "pixelPosition": true,
  "radioValue": false,
- "reliableMarginLeft": true
+ "reliableMarginLeft": true,
+ "smoothAnim": true
  };
  } else if ( /msie 9\.0/i.test( userAgent ) ) {
  expected = {
@@ -108,7 +110,8 @@ testIframe(
  "pixelMarginRight": true,
  "pixelPosition": true,
  "radioValue": false,
- "reliableMarginLeft": true
+ "reliableMarginLeft": true,
+ "smoothAnim": true
  };
  } else if ( /chrome/i.test( userAgent ) ) {
 
@@ -128,7 +131,8 @@ testIframe(
  "pixelMarginRight": true,
  "pixelPosition": true,
  "radioValue": true,
- "reliableMarginLeft": true
+ "reliableMarginLeft": true,
+ "smoothAnim": true
  };
  } else if ( /\b(?:9|10)\.\d(\.\d+)* safari/i.test( userAgent ) ) {
  expected = {
@@ -145,7 +149,8 @@ testIframe(
  "pixelMarginRight": true,
  "pixelPosition": false,
  "radioValue": true,
- "reliableMarginLeft": true
+ "reliableMarginLeft": true,
+ "smoothAnim": true
  };
  } else if ( /firefox/i.test( userAgent ) ) {
  expected = {
@@ -162,7 +167,8 @@ testIframe(
  "pixelMarginRight": true,
  "pixelPosition": true,
  "radioValue": true,
- "reliableMarginLeft": false
+ "reliableMarginLeft": false,
+ "smoothAnim": true
  };
  } else if ( /iphone os (?:9|10)_/i.test( userAgent ) ) {
  expected = {
@@ -179,7 +185,8 @@ testIframe(
  "pixelMarginRight": true,
  "pixelPosition": false,
  "radioValue": true,
- "reliableMarginLeft": true
+ "reliableMarginLeft": true,
+ "smoothAnim": true
  };
  } else if ( /iphone os 8_/i.test( userAgent ) ) {
  expected = {
@@ -196,7 +203,8 @@ testIframe(
  "pixelMarginRight": true,
  "pixelPosition": false,
  "radioValue": true,
- "reliableMarginLeft": true
+ "reliableMarginLeft": true,
+ "smoothAnim": true
  };
  } else if ( /iphone os 7_/i.test( userAgent ) ) {
  expected = {
@@ -213,7 +221,8 @@ testIframe(
  "pixelMarginRight": true,
  "pixelPosition": false,
  "radioValue": true,
- "reliableMarginLeft": true
+ "reliableMarginLeft": true,
+ "smoothAnim": false
  };
  } else if ( /android 4\.[0-3]/i.test( userAgent ) ) {
  expected = {
@@ -230,7 +239,8 @@ testIframe(
  "pixelMarginRight": false,
  "pixelPosition": false,
  "radioValue": true,
- "reliableMarginLeft": false
+ "reliableMarginLeft": false,
+ "smoothAnim": false
  };
  }
 

test/unit/tween.js

@@ -5,11 +5,13 @@ if ( !jQuery.fx ) {
  return;
 }
 
-var oldRaf = window.requestAnimationFrame;
+var oldRaf = window.requestAnimationFrame,
+ oldPerformance = window.performance;
 
 QUnit.module( "tween", {
  setup: function() {
  window.requestAnimationFrame = null;
+ window.performance = null;
  this.sandbox = sinon.sandbox.create();
  this.clock = this.sandbox.useFakeTimers( 505877050 );
  this._oldInterval = jQuery.fx.interval;
@@ -23,6 +25,7 @@ QUnit.module( "tween", {
  jQuery.fx.stop();
  jQuery.fx.interval = this._oldInterval;
  window.requestAnimationFrame = oldRaf;
+ window.performance = oldPerformance;
  return moduleTeardown.apply( this, arguments );
  }
 } );