On chrome mobile after 2 animations with many leaves then react-flip-move gets stuck in state where many nodes hang about that should have been removed.

Using a recent version of mobile chrome go to kchomp.co and touch the worldnews link at the top followed by the news link as quickly as possible.

From here if you click the worldnews link again you should see that a bunch of the nodes related to news remain in the DOM. I verified with remote debugging that these nodes are no longer in props.children. From here clicking further links in the header leads to more and more HTML elements being left around. It seems that react-flip-move has gotten into a state where it can no longer remove needed elements.

I have been unable to replicate the issue on desktop chrome, it seems specific to mobile chrome. Using the latest react-flip-move (2.7.3).

[Hypnosphi]

There is a chance it could be solved if we would store styles in state and pass it to react children instead of applying directly. In that case the styles would be preserved during rerender. But this would mean a breaking change as it would require all children to accept style prop.

[joshwcomeau]

@cusspvz interesting… we’d also have to merge with any existing styles, but that’s an easy-to-solve nit.

Would be receptive to giving this a shot 😃 my schedule’s crazy right now, involved in a couple other projects and very busy at work, but I think this is a problem worth fixing and storing styles in state seems to make sense to me (I’d have to think much more about it to know if there would be unintended side effects).