catdad / canvas-confetti

🎉 performant confetti animation in the browser
https://catdad.github.io/canvas-confetti/
ISC License
10.18k stars 358 forks source link

Stuck confetti #233

Open rssfrncs opened 1 month ago

rssfrncs commented 1 month ago

Hi we've had reports on latest Chrome / Edge of the confetti sometimes getting stuck.

Screenshot below

image

Below is how we call confetti with the only dynamic config being the origin so we can place it on the screen.


confetti({
          particleCount: 30,
          spread: 360,
          decay: 0.65,
          gravity: 0.1,
          startVelocity: 30,
          ticks: 40,
          drift: 0,
          disableForReducedMotion: true,
          origin: coords
});
ArtisArtStudio commented 1 month ago

I have a similar issue. After confetti starts, Chrome just freezes with no response for a couple of seconds. then gets back to normal. There is no error message or anything. My code is like this:

var end = Date.now() + (5 * 1000);

    (function frame() {

        confetti({
            particleCount: 1,
            angle: 60,
            spread: 55,
            scalar: 0.6,
            shapes: [pumpkin],
            origin: { x: 0, y:1 },
            startVelocity: 150,
            colors: ['#ff912a']
        });
        confetti({
            particleCount: 1,
            angle: 120,
            spread: 55,
            startVelocity: 150,
            origin: { x: 1, y:1},
            colors: ['#ffffff']
        });

        // keep going until we are out of time
        if (Date.now() < end) {
            requestAnimationFrame(frame);

            return;
        }
rssfrncs commented 1 month ago

That sounds like a problem with your cpu utilisation but the original issue is rather the canvas is not cleared.