catdad / canvas-confetti

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

getBoundingClientRect is not a function #164

Closed leveled23 closed 2 years ago

leveled23 commented 3 years ago

Our Sentry error logs are getting spammed with "getBoundingClientRect is not a function" from Chrome Mobile browsers (even latest version). But I can't replicate it. It seems to be coming from canvas-confetti though. Any ideas what could be causing this?

catdad commented 3 years ago

There isn't enough information in this report. I would need at least an error stack trace, but additionally including information about the environment or a way to reproduce the issue.

leveled23 commented 3 years ago

It seems to happen in environments where canvas is not supported. It would probably be best to check if it is supported with !!window.HTMLCanvasElement before anything else.

catdad commented 2 years ago

I am not familiar with a recent browser that does not support canvas. What environment are you seeing this in and how can I reproduce it?

Further, it seems odd to choose a library called canvas-confetti to implement confetti in a browser that does not support canvas. I am not sure what the expected correct behavior would be for a library in that case.

leveled23 commented 2 years ago

Well, I'm just saying that the library should fail gracefully with unsupported browsers instead of throwing an error. Our websites are used all over the world. Also in poorer regions of the world, where people tend to have older versions of browsers. It's not like we're targeting older version specifically.

catdad commented 2 years ago

This is a free and open source project, so support expectations are not the same as for a large commercial product. In the limited time I have to contribute to open source, I don't have time to test and validate obsolete browsers. Considering that this is an edge case that will not help the vast majority of users, I won't be putting this on my roadmap. I believe this is better handled by integrators that know they will need to support such browsers and specifically need to validate all of their application's functionality on them.

As usual, PRs are welcome to this probject.

DavidWeiss2 commented 2 years ago

This error will reproduce when the user passes an HTML element that is not a canvas or undefined.

algosdev commented 8 months ago

@catdad I was able to reproduce it - basically it's inside iframe and iframe is rendered, but not visible to user. I believe screenshot explains many things:

image
pvscreations commented 2 months ago

This issue mainly occurs when the screen is tilted horizontally and vertically multiple times, as well as on touch screens when trying to drag or move elements with a finger on full-sized canvas.