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…

raf.js

// 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