TIL: `will-change` and `isolation` CSS properties

The Perfetto UI is a fascinating project to work on because it often faces performance problems which you wouldn’t see in more “normal” webapps. I learn about all sorts of weird web features by reviewing PRs for the UI.

Two such features I just learned about:

• will-change (PR): a hint, to be used sparingly, to tell the browser that a certain property of a DOM element will change in the near future.
• isolation (PR): I feel MDN didn’t do a great job of explaining so I asked Claude which gave a much more useful answer:

  isolation is a CSS property that creates a new stacking context for an element. Think of a stacking context as a self-contained z-index universe. Elements within one stacking context can layer on top of each other, but their z-index values only matter relative to siblings within that same context.