rive-app / rive-app/rive-react
bug: rive animations can get "stuck" in a stopped rendering state due to `IntersectionObserver`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 58
- Avg merge
- 3h 23m
- Merged PRs (30d)
- 6
Description
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...
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/hooks/useRive.tsx around lines 150-164 and trace the IntersectionObserver logic that pauses rendering when canvases are occluded. Reproduce or reason through the reported race, then verify that an affected canvas cannot remain stuck in a stopped-rendering state and that startRendering() is no longer needed as a periodic workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100