Window.requestanimationframe Silently Fails To Invoke Callback, But Generates A Valid Requestid, When Invoked Inside Of A Cross-domain Iframe

I am developing inside of a Google Chrome Extension. In this environment, I have the ability to inject JavaScript into third-party websites after requesting the appropriate permiss

Solution 1:

Your problem has nothing to do with iframes, but with the invisibility of background pages.

Think of a background page as a non-focused tab. If you use requestAnimationFrame in a non-active tab, then the callback will not be called until the tab is focused again, as shown in the next example. Since background pages are never be "focused", RAF callbacks will never be invoked.

Paste the following code in a console, and move to a different tab. Wait a few seconds before activating the tab again. You will see that the logged timestamps in the console are very close. This shows that the callback of RAF will only be called when the tab is focused again.

setTimeout(function() {
    console.time(1);
    console.time(2)
    requestAnimationFrame(function() {
        console.timeEnd(1)
    });
}, 2000)
window.onfocus = function() {
    console.timeEnd(2);
};

The "solution" to your problem is to use the good old setTimeout instead:

setTimeout(function() {
    console.log('Success');
}, 25); // 40 Hz.