4 ms·

I would also suggest looking into the following in this case: https://developer.mozilla.org/en-US/docs/Web/CSS/contain https://developer.mozilla.org/en-US/docs

I would also suggest looking into the following in this case: https://developer.mozilla.org/en-US/docs/Web/CSS/contain https://developer.mozilla.org/en-US/docs/Web/CSS/contain https://developer.mozilla.org/en-US/docs/Web/CSS/will-change https://developer.mozilla.org/en-US/docs/Web/CSS/will-change There are hints you can provide to the browser that may have an impact in scenarios where you are animating layout properties.

bijection 1y ago
I was just starting a comment on this but you beat me to it! I believe contain: strict; on the parent element would have been sufficient here.
- webstrand 1y ago
  I tested `contain: strict` on their color changing SVG and didn't see any difference. Profiler says it's still doing layout.
  - jonny_eh 1y ago
    A lot of armchair suggestions here, but no benchmarks provided. Thanks for actually testing!
  - DrammBA 1y ago
    You tried the fix for height recalculation on the SVG that is changing fill and stroke and it didn't fix the issue? I wonder why
spankalee 1y ago
CSS contain has made so many performance "truths" obsolete, but so few developers realize it. I've seen massive efforts to do things like port text editors to WebGL where rasterizing text is a huge pain where putting `contain: content` on the individual elements in the DOM version would have delivered most of the perf improvements. Browser rendering engines are now sophisticated GPU-accelerated compositors. Absolute positioning with contain: strict removes basically all CSS layout from the perf equation, and you don't have to write your own compositor or line-layout! `* {contain: content}` and flex/grid gets you the good parts of HTML and very good performance.