Last active
December 15, 2015 20:19
-
-
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
})(); |
I have found a workaround: using top.requestAnimationFrame. Does it works for you guys? I mean within an iframe.
A better ios fix https://github.com/kof/animationFrame
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can't you feature test it instead of version sniff? f.e. request once, if called back - then it works?