react-spring icon indicating copy to clipboard operation
react-spring copied to clipboard

[bug]: Browser freeze with prop change in nested animations

Open remiremi opened this issue 4 years ago • 4 comments

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

remiremi avatar Feb 10 '22 08:02 remiremi

I have the same problem,when the "document.hidden = true" animations will blocked. countdown behavior to be confused.

ClishWang avatar Feb 25 '22 08:02 ClishWang

I think this is related to #1882

joshuaellis avatar Apr 10 '23 16:04 joshuaellis