Skip to content

Instantly share code, notes, and snippets.

@KrofDrakula
Last active December 15, 2015 20:19
Show Gist options
  • Select an option

  • Save KrofDrakula/5318048 to your computer and use it in GitHub Desktop.

Select an option

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;
})();
@danb-cws

Copy link
Copy Markdown

I can confirm this fixed a bug on ios6 where raf would not run on subsequent pages after being invoked on one page. (no iframe, just simple page to page navigation) Same symptoms with the address bar as you have described (click on url bar then back to page and raf runs ok). I was surprised how little info came up on this. Thanks for the code.

@y-nk

y-nk commented Aug 6, 2013

Copy link
Copy Markdown

Thank you so much.
It's fixed a bug i was trying to find for 48h straight.

@kof

kof commented Sep 19, 2013

Copy link
Copy Markdown

Can't you feature test it instead of version sniff? f.e. request once, if called back - then it works?

@kof

kof commented Sep 21, 2013

Copy link
Copy Markdown

I have found a workaround: using top.requestAnimationFrame. Does it works for you guys? I mean within an iframe.

@kof

kof commented Sep 22, 2013

Copy link
Copy Markdown

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