[DevTools Bug]: CSS Animation Errors When Using Devtools

[SocietyNiu]

Website or app

https://stackblitz.com/edit/stackblitz-starters-n26smqed?file=pages%2Findex.js

Repro steps

Repro steps:

1. Install 7.0.0 React DevTools
2. Use this sample project
3. Open preview in new tab
4. Run the animation and disable the DevTools to run it again

The animation becomes abnormal after using DevTools 7.0.0
The error happens not only the browser extension, but also local terminal.

bug.mp4

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

[SocietyNiu]

This issue will cause some existing React projects to display abnormally, for example rc-segmented, antd.

bug2.mp4

[SocietyNiu]

I suspect that a feature introduced in version 7.0.0 executed more function calls before the animation was executed, causing the style to refresh and thus causing animation anomalies. As shown in the figure below, in version 7.0.0, the original continuous animation was divided into two parts.

DevTools 6.1.5

DevTools 7.0.0

[hoxyq]

@eps1lon Could it be related to suspense boundary measurements? Looking at the trace for 7.0.0, looks like it is fired during the transform animation, but I am not sure exactly how this could affect it.