will-change used sparingly and correctly

will-change promotes an element to its own GPU compositing layer (ISO-25010 resource-utilisation). Used correctly on a single animating modal, that is a genuine win. Applied globally in CSS to 20+ static elements — headers, footers, card wrappers that never move — it creates 20+ permanent GPU layers, consuming VRAM on every device. On mobile with limited VRAM, this causes compositor memory pressure, degrades scroll performance, and can make the browser drop frames on animations it would otherwise handle smoothly. Misuse is the opposite of its intended effect.

Audit every will-change declaration and remove any that target non-animating elements:

grep -r "will-change" src/

For elements that animate occasionally (modals, tooltips, drawers), apply and remove will-change in JavaScript around the animation rather than in permanent CSS:

// src/components/modal.tsx
function animateOpen(el: HTMLElement) {
  el.style.willChange = 'opacity, transform'  // hint before animation
  el.animate(
    [{ opacity: 0, transform: 'scale(0.95)' }, { opacity: 1, transform: 'scale(1)' }],
    { duration: 200 }
  ).finished.then(() => {
    el.style.willChange = 'auto'  // release the layer after animation
  })
}

Keep active will-change declarations to 3–5 elements simultaneously. Static containers, page wrappers, and <section> elements must not have will-change set.