Hacker News Reader

Comment by bob1029 | Hacker News Reader

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/will-change

There are hints you can provide to the browser that may have an impact in scenarios where you are animating layout properties.

View on HN

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.

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.

I tested `contain: strict` on their color changing SVG and didn't see any difference. Profiler says it's still doing layout.

A lot of armchair suggestions here, but no benchmarks provided. Thanks for actually testing!

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

Reply on news.ycombinator.com