Performance issues on Firefox

[enrickla]

Hey! So everything seems fine on android and iOS but I got serious slow performance on Firefox after 10-15 sec and it's getting worst overtime.

Here is my code ("confetti-js": "0.0.17"):

const confettiSettings = { target: 'confetti-canvas', "max":"15", "size":"1", "start_from_edge":false, "respawn":true, "animate":false, "props":[
				{"type":"svg","src": this.state.storageURL + 'SVG/BC_p_line.svg',"size":25,"weight":0.05},
				{"type":"svg","src": this.state.storageURL + 'SVG/BC_p_circle_green.svg',"size":15,"weight":0.15},
				{"type":"svg","src": this.state.storageURL + 'SVG/BC_p_circle.svg',"size":15,"weight":0.15},
				{"type":"svg","src": this.state.storageURL + 'SVG/BC_p_square.svg',"size":7,"weight":0.15},
				{"type":"svg","src": this.state.storageURL + 'SVG/BC_p_dots.svg',"size":35,"weight":0.15},
				{"type":"svg","src": this.state.storageURL + 'SVG/BC_p_dots_green.svg',"size":35,"weight":0.15}   ], "colors":[[0,255,209]], "clock":"8", "rotate":true};
				const confetti = new ConfettiGenerator(confettiSettings);
				confetti.render();

Is this problem related?
https://gamedev.stackexchange.com/questions/37298/slow-firefox-javascript-canvas-performance

[arutinn]

Still an issue 😢

[petabite]

Hey i noticed that you're using custom confetti particles as well. Could your issue be related to what I'm experiencing in #26?

[userexec]

We fixed this for a promo by adding a frame limiter to the animation loop and capping it at 30fps instead of whatever Firefox was willing to hand over to it. Line 210's call to requestAnimationFrame just needs to be wrapped in a setTimeout.

[enrickla]

Ohh great, I will test that! Sorry for the late reply!!

[jrmuizel]

@enrickla do you see the same problem on https://agezao.github.io/confetti-js/? If not can you provide a URL that shows the problem?