search

rive-app / rive-react

React runtime for Rive
https://rive-app.github.io/rive-react
MIT License
755 stars 27 forks source link

bug: rive animations can get "stuck" in a stopped rendering state due to `IntersectionObserver` #257

Open aroman opened 1 month ago

aroman commented 1 month ago

We've tracked a nasty race condition down in our product that ultimately we determined was caused by rive-react's usage of the IntersectionObserver to pause rendering while canvases are occluded.

In certain circumstances, this effect can cause the canvas to get "stuck" in a stopped-rendering state. Simply running startRendering() on a canvas in this state fixes the issue.

Our temporary workaround is to call startRendering() periodically every 100ms to ensure these get un-stuck. However, obviously, this should be fixed...

bodymovin commented 1 month ago

Hey! Can you share some basic steps to reproduce it? Do you happen to know if it's while scrolling, on load, or when components are reordered in the DOM?

MrRoboman commented 1 month ago

Linking our thread in the community: https://rive.app/community/forums/support/fsnLLkXUaA62/react-rive-animations-getting-stuck/ftTlrwM2cxuq

As mentioned there, we've noticed it when reordering DOM elements, resizing the window, leaving and coming back to the tab... sometimes it seems to happen without any apparent explanation.

MrRoboman commented 1 month ago

The code we think is causing the problem: https://github.com/rive-app/rive-react/blob/8bb5652df020f20bf641a2fc480a59c08cdd093b/src/hooks/useRive.tsx#L150-L164

DCDRins commented 2 weeks ago

Have the same problem "startRendering" never happens, animation is stuck

Rive animation should be anywhere, but out of viewport for the first render.

UPD: if it's not enough to understand the prob, let me know and I will share a real life example of this bug