Skip to content

Instantly share code, notes, and snippets.

@KrofDrakula
Last active December 15, 2015 20:19
Show Gist options
  • Save KrofDrakula/5318048 to your computer and use it in GitHub Desktop.
Save KrofDrakula/5318048 to your computer and use it in GitHub Desktop.
Due to a bug in the native `requestAnimationFrame` function running inside `<iframe>` elements on iOS 6, I've decided to write up a custom function that implements a blacklist. Use this snippet and use `nextFrame` and `cancelFrame` on the `window` object to use this workaround with the same method signature as the spec. I've avoided overriding t…
// requestAnimationFrame implementation as a custom function to allow blacklisting
// devices with broken implementation. Currently needs timer-based fallbacks for iOS 6.x for
// code running inside <iframe> elements.
// Uses polyfills based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/
(function() {
var blacklisted = /iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent),
lastTime = 0,
nativeRequest = window.requestAnimationFrame || null,
nativeCancel = window.cancelAnimationFrame || null;
['webkit', 'moz'].forEach(function(prefix) {
nativeRequest = nativeRequest || window[prefix+'RequestAnimationFrame'] || null;
nativeCancel = nativeCancel || window[prefix+'CancelAnimationFrame'] || window[prefix+'CancelRequestAnimationFrame'] || null;
});
function polyfillRequest(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
}
function polyfillCancel(id) {
clearTimeout(id);
}
this.nextFrame = (!blacklisted && nativeRequest != null) ? nativeRequest : polyfillRequest;
this.cancelFrame = (!blacklisted && nativeCancel != null) ? nativeCancel : polyfillCancel;
})();
@kof
Copy link

kof commented Sep 22, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment