From 94a4f1507d1edf7b02376a4e8afaa93b2957f801 Mon Sep 17 00:00:00 2001
From: Yunchan Cho <chan376@gmail.com>
Date: Sat, 2 Jun 2018 11:59:35 +0900
Subject: [PATCH] Run requestAnimationFrame for no jank if a browser supports
 it

Existing code always run setTimeout if running browser is not firefox.
This causes jank issue in other major browsers except firefox.
Furthermore this invalidates Time Slice feature which reactjs 16.x will provide for high framerate.
This commit enables requestAnimationFrame to be run for major web browsers.
---
 modes/canvas/surface.js | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/modes/canvas/surface.js b/modes/canvas/surface.js
index 0664c57..4b33df7 100644
--- a/modes/canvas/surface.js
+++ b/modes/canvas/surface.js
@@ -2,6 +2,21 @@ var Class = require('../../core/class');
 var Container = require('../../dom/container');
 var Element = require('../../dom/native');
 
+(function() {
+  if (window.requestAnimationFrame) {
+    return;
+  }
+
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+  for (var i = 0; i < vendors.length; i++) {
+    var rafName = vendors[i] + 'RequestAnimationFrame';
+    if (window[rafName]) {
+      window.requestAnimationFrame = window[rafName];
+      break;
+    }
+  }
+})();
+
 var fps = 1000 / 60, invalids = [], renderTimer, renderInvalids = function(){
 	clearTimeout(renderTimer);
 	renderTimer = null;
@@ -102,9 +117,9 @@ var CanvasSurface = Class(Element, Container, {
 			this._valid = false;
 			invalids.push(this);
 			if (!renderTimer){
-				if (window.mozRequestAnimationFrame){
+				if (window.requestAnimationFrame){
 					renderTimer = true;
-					window.mozRequestAnimationFrame(renderInvalids);
+					window.requestAnimationFrame(renderInvalids);
 				} else {
 					renderTimer = setTimeout(renderInvalids, fps);
 				}