Bug: CSS not being applied properly in Chrome with React experimental (moveBefore)

[guillaumebrunerie]

React version: 0.0.0-experimental-3820740a-20250509

I ran into what appears to be a paint bug in Chrome, which is only triggered by React experimental (not React stable), and doesn’t reproduce in either Firefox or Safari. Basically, after rerendering a list of elements with keys, the CSS is not being applied properly to the elements despite being correct in the dev tools.

I reported it at https://issues.chromium.org/issues/417426569, but I’m crossposting here as well in case someone can figure out how to reproduce it without React, or explain what is different between the latest stable version of React and React experimental.

Steps to reproduce the problem

• Clone the repository at https://github.com/guillaumebrunerie/paint-bug
• Run npm install and npm run dev, open Chrome at localhost:5173, and open the dev tools.
• Note that the red rectangles are ordered from left to right when reading from top to bottom, this is correct.
• Click the "Refresh" button in the webpage a few times (it simply recreates a fresh set of data to render, in the same way as the initial set of data is created).
• Note that the red rectangle are no longer ordered from left to right, but checking the DOM in the dev tools, you can see that according to the left: XX% styles, they should be ordered.
• You can also try to change very slightly the value of a left: XX% style (for instance going from 13% to 13.00001%), it completely changes the position of the corresponding element, which shows that the element wasn’t painted at the correct position to begin with.

Source code (React): https://github.com/guillaumebrunerie/paint-bug/blob/main/src/main.jsx
CSS: https://github.com/guillaumebrunerie/paint-bug/blob/main/src/index.css

Problem Description

The example creates a list of 10 random numbers between 0 and 90, sorts it, and then for each of them renders an element with width 10% and left XX%. The list is rendered using React keys based on the original order, which means that clicking refresh will reuse the existing elements, reorder them, and change their CSS.

I could only reproduce this issue with React experimental, but it seems clear to me that it is a Chrome issue, not a React issue, as the CSS is not being applied properly despite being correct in the DevTools. No idea what React experimental does differently than React stable, though.

The issue does not reproduce in either Firefox or Safari. Not sure if it is a regression, as I only recently switched to React experimental. I could reproduce it in Chrome Beta 137.0.7151.15 and in Chrome Canary 138.0.7177.0 as well.

Video: https://github.com/user-attachments/assets/451c82c0-1939-4a66-9d3b-c5a499b90442

[guillaumebrunerie]

I managed to reproduce it without React, it’s parentNode.moveBefore(node, null) that doesn’t seem to apply CSS changes properly, check the Chrome issue for more details.