react icon indicating copy to clipboard operation
react copied to clipboard
Published 2 months ago • verified publisher icon facebook

[DevTools Bug]: CSS Animation Errors When Using Devtools

Open SocietyNiu opened this issue 4 months ago • 5 comments

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.

https://github.com/user-attachments/assets/95960302-f3d3-4acb-b8d4-f511ecdd2ad1

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 avatar Oct 15 '25 23:10 SocietyNiu

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

https://github.com/user-attachments/assets/d0f3ee26-06b8-4a12-b6b0-815ee5d5738d

SocietyNiu avatar Oct 16 '25 00:10 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 Image

DevTools 7.0.0 Image

SocietyNiu avatar Oct 16 '25 22:10 SocietyNiu

@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.

hoxyq avatar Oct 19 '25 22:10 hoxyq

https://github.com/ant-design/ant-design/issues/55325 https://github.com/ant-design/ant-design/issues/55404 https://github.com/ant-design/ant-design/issues/55269 https://github.com/ant-design/ant-design/issues/55253 https://github.com/ant-design/ant-design/issues/55251 https://github.com/ant-design/ant-design/issues/55257

afc163 avatar Oct 22 '25 10:10 afc163

v7.0.1 React DevTools When I add a classname to a DOM element dynamically. The related styles do not take effect. After I tried to disable the extension, it resume normal.

Now i use v6.0.1 React DevTools, this error has not occurred

jim-tian avatar Dec 08 '25 06:12 jim-tian