Jerky animation in Firefox

I’m using Purescript to write code that animates words and images on a canvas. It runs fine in Chrome, but produces “jerky” animation in Firefox (by jerky I mean that it seems to randomly miss a few frames from time to time). Any idea why or how to debug this? It doesn’t use much CPU, about 20% of one core of my 4-core MacBook Pro.

For now I can solve this by using Chrome, but I’d like to have this code be portable eventually. It’s going to turn into a math game.

My animation method is thus: I’m using the Signal library, specifically the “animationFrame” function that produces a signal which fires once per animation frame, roughly 15 ms or so. On reception of the signal I clear and redraw the canvas. It’s not complicated visually. Replacing this with “every 15” results in similar jerkiness problems, wile replacing it with “every 30” results in no intermittent jerks (but looks less smooth overall due to lower frame rate).

I don’t have a concrete answer for you, but PureScript code is nearly always going to be slower than JS code for a variety of reasons (more allocations, potentially less efficient iteration, etc), and any high performance drawing is going to be difficult. I would run the FF profiler to see where your time is being spent.

1 Like