Skip to content

Commit c89cea5

Browse files
greggmangreggman
committed
Remove requestAnimationFrame wrapper
It used to be that browsers ran requestAnimationFrame in iframes even if that iframe was scrolled off the screen. This has been fixed in all major browsers (Chrome/Firefox/Safari) so this code is no longer needed.
1 parent bd9c143 commit c89cea5

File tree

2 files changed

+1
-149
lines changed

2 files changed

+1
-149
lines changed

‎webgl/resources/lessons-helper.js

Lines changed: 0 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -416,82 +416,6 @@
416416
}
417417
};
418418

419-
// Replace requestAnimationFrame and cancelAnimationFrame with one
420-
// that only executes when the body is visible (we're in an iframe).
421-
// It's frustrating that th browsers don't do this automatically.
422-
// It's half of the point of rAF that it shouldn't execute when
423-
// content is not visible but browsers execute rAF in iframes even
424-
// if they are not visible.
425-
if (topWindow.requestAnimationFrame) {
426-
topWindow.requestAnimationFrame = (function(oldRAF, oldCancelRAF) {
427-
let nextFakeRAFId = 1;
428-
const fakeRAFIdToCallbackMap = new Map();
429-
let rafRequestId;
430-
let isBodyOnScreen;
431-
432-
function rAFHandler(time) {
433-
rafRequestId = undefined;
434-
const ids = [...fakeRAFIdToCallbackMap.keys()]; // WTF! Map.keys() iterates over live keys!
435-
for (const id of ids) {
436-
const callback = fakeRAFIdToCallbackMap.get(id);
437-
fakeRAFIdToCallbackMap.delete(id);
438-
if (callback) {
439-
callback(time);
440-
}
441-
}
442-
}
443-
444-
function startRAFIfIntersectingAndNeeded() {
445-
if (!rafRequestId && isBodyOnScreen && fakeRAFIdToCallbackMap.size > 0) {
446-
rafRequestId = oldRAF(rAFHandler);
447-
}
448-
}
449-
450-
function stopRAF() {
451-
if (rafRequestId) {
452-
oldCancelRAF(rafRequestId);
453-
rafRequestId = undefined;
454-
}
455-
}
456-
457-
function initIntersectionObserver() {
458-
const intersectionObserver = new IntersectionObserver((entries) => {
459-
entries.forEach(entry => {
460-
isBodyOnScreen = entry.isIntersecting;
461-
});
462-
if (isBodyOnScreen) {
463-
startRAFIfIntersectingAndNeeded();
464-
} else {
465-
stopRAF();
466-
}
467-
});
468-
intersectionObserver.observe(document.body);
469-
}
470-
471-
function betterRAF(callback) {
472-
const fakeRAFId = nextFakeRAFId++;
473-
fakeRAFIdToCallbackMap.set(fakeRAFId, callback);
474-
startRAFIfIntersectingAndNeeded();
475-
return fakeRAFId;
476-
}
477-
478-
function betterCancelRAF(id) {
479-
fakeRAFIdToCallbackMap.delete(id);
480-
}
481-
482-
topWindow.cancelAnimationFrame = betterCancelRAF;
483-
484-
return function(callback) {
485-
// we need to lazy init this because this code gets parsed
486-
// before body exists. We could fix it by moving lesson-helper.js
487-
// after <body> but that would require changing 100s of examples
488-
initIntersectionObserver();
489-
topWindow.requestAnimationFrame = betterRAF;
490-
return betterRAF(callback);
491-
};
492-
493-
}(topWindow.requestAnimationFrame, topWindow.cancelAnimationFrame));
494-
}
495419

496420
updateCSSIfInIFrame();
497421

‎webgl/resources/webgl-lessons-helper.js

Lines changed: 1 addition & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -206,78 +206,6 @@
206206
}
207207
};
208208

209-
/**
210-
* Get's the iframe in the parent document
211-
* that is displaying the specified window .
212-
* @param {Window} window window to check.
213-
* @return {HTMLIFrameElement?) the iframe element if window is in an iframe
214-
*/
215-
function getIFrameForWindow(window) {
216-
if (!isInIFrame(window)) {
217-
return;
218-
}
219-
const iframes = window.parent.document.getElementsByTagName("iframe");
220-
for (let ii = 0; ii < iframes.length; ++ii) {
221-
const iframe = iframes[ii];
222-
if (iframe.contentDocument === window.document) {
223-
return iframe; // eslint-disable-line
224-
}
225-
}
226-
}
227-
228-
/**
229-
* Returns true if window is on screen. The main window is
230-
* always on screen windows in iframes might not be.
231-
* @param {Window} window the window to check.
232-
* @return {boolean} true if window is on screen.
233-
*/
234-
function isFrameVisible(window) {
235-
try {
236-
const iframe = getIFrameForWindow(window);
237-
if (!iframe) {
238-
return true;
239-
}
240-
241-
const bounds = iframe.getBoundingClientRect();
242-
const isVisible = bounds.top < window.parent.innerHeight && bounds.bottom >= 0 &&
243-
bounds.left < window.parent.innerWidth && bounds.right >= 0;
244-
245-
return isVisible && isFrameVisible(window.parent);
246-
} catch (e) {
247-
return true; // We got a security error?
248-
}
249-
}
250-
251-
/**
252-
* Returns true if element is on screen.
253-
* @param {HTMLElement} element the element to check.
254-
* @return {boolean} true if element is on screen.
255-
*/
256-
function isOnScreen(element) {
257-
let isVisible = true;
258-
259-
if (element) {
260-
const bounds = element.getBoundingClientRect();
261-
isVisible = bounds.top < topWindow.innerHeight && bounds.bottom >= 0;
262-
}
263-
264-
return isVisible && isFrameVisible(topWindow);
265-
}
266-
267-
// Replace requestAnimationFrame.
268-
if (topWindow.requestAnimationFrame) {
269-
topWindow.requestAnimationFrame = (function(oldRAF) {
270-
271-
return function(callback, element) {
272-
const handler = function() {
273-
return oldRAF(isOnScreen(element) ? callback : handler, element);
274-
};
275-
return handler();
276-
};
277-
278-
}(topWindow.requestAnimationFrame));
279-
}
280-
281209
updateCSSIfInIFrame();
282210

283211
//------------ [ from https://github.com/KhronosGroup/WebGLDeveloperTools ]
@@ -781,7 +709,7 @@
781709
if (wrapper.getError) {
782710
wrapper.getError = function() {
783711
for (const err in glErrorShadow) {
784-
if (glErrorShadow.hasOwnProperty(err)) {
712+
if (Object.prototype.hasOwnProperty.call(glErrorShadow, err)) {
785713
if (glErrorShadow[err]) {
786714
glErrorShadow[err] = false;
787715
return err;

0 commit comments

Comments
 (0)