I’d note that this is able to reproduce even when the dev tools are closed; its a bit tricky but possible if you resize close to a breakpoint. I believe this may be a bug in Chrome’s layout engine somewhere, not dev tool specific :)

Moving to Layout per #c3.

Could you please explain what the problem appears to be, it was not clear from either your description or the video.

Also, by breakpoint do you mean a media query?

We've mitigated this issue on the example site by removing media queries, so the example site will no longer show the problem.

However, in reference to #c5, I'm happy to try and clarify. The video should show the issue clearly, hopefully some further explanation is helpful. This issue seems important if indeed it's a bug in Chrome's layout calculations.

Originally, I noticed that when swapping across two breakpoints (doesn't matter where, just that the breakpoint was crossed, i.e. a media query change occurred), incorrect styles were being matched to an element. In the video you'll see that I started with the "large" size (correct), went to "small" (correct), "large" (correct), "small" (correct), then "large" again - incorrect! But as I had to swap a few times, not 100% reproduceable (but highly so - maybe every third or fourth time it would mess up)

If you observe in the video, the input field layout is wrong compared to how it started. Why? Using the inspector, and the parts I point out, Chrome has matched and applied a `(max-width: 480px)` media query to an element, but the document width is 768px wide - this should not have happened.

I had the inspector open to show that it was applying the incorrect media query to the element. However, it would occur if I had the inspector closed and instead resized the browser window close to the 480px media query breakpoint.

The site is using React, so as noted in my suspicions in the original post, I wonder if maybe something in the unmounting / remounting of elements is happening out of sequence with the calculation of which media queries to apply?

Does that help explain the issue?

If I can, I'll try and see if I can make a reproducible case outside of the site I'm working on, but it could be a tricky one to pinpoint just what combination of things has caused this.

Thank you for providing more feedback. Adding requester "eae@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Thanks for the clarification. That makes sense.

Media queries are handled by the style team I believe, over to them for further triage.

Thanks for the report. It's good that you've fixed your site, but unfortunately that leaves us without a repro case.

It would be great if we could get a reproducible case for this one.

Closing due to inactivity and inability to reproduce.