[bug]: Browser freeze with prop change in nested animations
Which react-spring target are you using?
- [X]
@react-spring/web - [ ]
@react-spring/three - [ ]
@react-spring/native - [ ]
@react-spring/konva - [ ]
@react-spring/zdog
What version of react-spring are you using?
9.4.2
What's Wrong?
I have an animated loop rotating a container, contained in an animated loop moving the container.
The animation sometimes randomly freezes the browser, which prompts me to stop the webpage.The console indicates the script got stopped in the flushUpdate method.
To Reproduce
See codesandbox. Doesn't freeze every time, but if you click the box a couple of times it should freeze.
I think the root cause is that there is an outer animation, with an inner animation that has a loop. I tried splitting the animated.div component in two separate nested components, one for the translation and one for the rotation, but the result is the same: browser ends up freezing.
Tried on Firefox only.
Expected Behaviour
Browser should never freeze.
Link to repo
https://codesandbox.io/s/interesting-raman-p8y5j?file=/src/index.js
I have the same problem,when the "document.hidden = true" animations will blocked. countdown behavior to be confused.
I think this is related to #1882