_requestAnimationFrame TypeError when running default engine/render loops in Firefox Extension

[calebchalmers]

I created a script using the minimal example from the Getting Started wiki page, and included it and matter.js as content scripts in a basic Firefox Extension.

When I run the extension on a webpage, the line Engine.run(engine); raises the exception TypeError: 'requestAnimationFrame' called on an object that does not implement interface Window.

After inspecting the matter.js source I found that the problem comes from this line:

The same problem occurs with Render.run(render); and the corresponding Runner.run function in matter.js.

This seems to be because the global object in the Firefox extension's content scripts is not window but rather a different sandbox object, therefore _requestAnimationFrame is not being called on window and raises the exception.

To prove this, I replaced _requestAnimationFrame(render) with window.requestAnimationFrame(render) in both Runner.run functions and the loops successfully ran without any errors.

Using _replaceAnimationFrame.call(window, render) also works, and still maintains the cross-browser support that the original method provides.

This was tested using Firefox v61.0.2, and both Matter v0.14.2 and v0.10.0.

[liabru]

I'm not sure if this is still the case but leaving this here in case someone runs into something similar:

• try polyfill window.requestAnimationFrame for your environment
• or fork and customise Matter.Runner
• or create your own game loop that calls Engine.update as needed

As of 0.20.0 you can also now:

• patch Matter.Runner._onNextFrame with a polyfill without needing window

Thanks for the report.