search

visgl / react-google-maps

React components and hooks for the Google Maps JavaScript API
https://visgl.github.io/react-google-maps/
MIT License
1.3k stars 110 forks source link

[Bug] when zooming fast back and forth the map gets to a state that is stuck #563

Open ronlv10 opened 1 month ago

ronlv10 commented 1 month ago

Description

When using a phone and zooming fast back and forth (out in out) with a map with advanced markers + clustering, sometimes the map gets to a state that it's stuck (and "going crazy")

after it happens a user can't do anything on the map and sometimes it's stuck in a way that reloads the tab doesn't work.

See:

https://github.com/user-attachments/assets/d85c4741-13a3-4fef-908e-c5f353e2cf72

P.S It also happened in my implementation of clustering on a map with an app that I have built.

Steps to Reproduce

not an easy one. I used the clustering demo : https://visgl.github.io/react-google-maps/examples/custom-marker-clustering

you should use your phone and zoom in and out aggressively

Environment

Logs

there is an warning when it happens: 

Cannot remove a WebglOverlay that has not been set to a map
ronlv10 commented 1 month ago

the error is the same as https://github.com/visgl/react-google-maps/issues/419 but in this bug it says that there is no impact on the app. Here the bug is critical.

ronlv10 commented 2 weeks ago

hey, @usefulthink any comment? This bug impacts our app severely

usefulthink commented 2 weeks ago

As far as I know, the issue in #419 has been resolved upstream in the maps API itself. Are you still seeing that warning-message?

usefulthink commented 2 weeks ago

And you're saying it is severely affecting your app, can you elaborate on that a bit? I was under the impression that the original issue only happens occasionally when aggressively zooming around the screen, which isn't something I'd expect users to do.

ronlv10 commented 1 week ago

And you're saying it is severely affecting your app, can you elaborate on that a bit? I was under the impression that the original issue only happens occasionally when aggressively zooming around the screen, which isn't something I'd expect users to do.

It happened to me multiple times while doing usability session with users. It doesn't happen only when zooming aggressively but it was my way to reproduce it faster. Here are two videos that I made now, zooming slowly back and forth until it happens: one from the demo clustering and one from my app. (please note it happens only with mobile zoom (two fingers)

Demo:

https://github.com/user-attachments/assets/fe47c598-1404-45b5-a1ad-b5beff922bcc

My app:

https://github.com/user-attachments/assets/8b34b524-1f9f-4fda-b816-4db389423684

As far as I know, the issue in #419 has been resolved upstream in the maps API itself. Are you still seeing that warning-message?

After upgrade the package version I didn't see the warning, I did saw now this error:

InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lng: -Infinity is not an accepted value

PS After reproducing it millions of times, I suspect that it happens when the user zooms out and keeps the fingers on the screen (and probably touching the markers)

usefulthink commented 1 week ago

Thanks a lot. That's an error-message I haven't yet seen, and a very helpful one at that. Let me see if I can figure out how it's even possible that lat/lng are Infinity. I'll also try to reproduce it myself.

ronlv10 commented 1 week ago

great, thanks a lot!

If you're struggling to reproduce let me know. I would be happy to jump on a call, I got to reproduce it through a few zooming.

ronlv10 commented 6 days ago

Hey @usefulthink , Have you able to reproduce it on your side ?