ProblemsGPU Compositing with will-change
02Medium

GPU Compositing with will-change

CSS / Performance

CSSPerformanceGPUAnimation

Context

We added `will-change: transform` to animating search bar elements. The mistake to avoid is applying it to the container or globally, which creates unnecessary GPU layers for every child element.

The Concept

`will-change: transform` pre-promotes an element to its own GPU compositor layer. Apply it surgically — only to the element that will actually animate — or you waste GPU memory.

Task

The container `.card-list` incorrectly has `will-change: transform`. Remove it from the container and add it to `.card` — the element that actually animates on hover.

styles.css
Hints0/3 revealed