Repaint Triggers
How changing visual CSS properties forces the browser to re-draw pixels, and how to avoid expensive paint operations.
What it is
A Repaint occurs when changes are made to an element's appearance that do not affect its layout or geometry (such as its physical width, height, or position in the document flow).
During a repaint, the browser skips the Layout (Reflow) phase and goes directly to re-running the Paint phase to update the pixels on the screen for that specific element.
Why it matters
While repaints are less computationally expensive than reflows, they are still costly.
Painting can be a highly intensive process, especially on mobile devices or when painting large areas. Frequent repaints block the main thread and can lead to dropped frames, jank, and battery drain.
How it works
When you modify visual CSS properties that don't affect geometry-like color, background-color, visibility, or box-shadow-the browser invalidates the existing painted pixels for that element's bounding box.
The rendering engine then issues new draw calls to the graphics layer to redraw just the visual aspects of the element in its current position before compositing it to the screen.
Try it
Use the DevTools Paint Flashing simulator. Watch how the heavy box-shadow animation lights up the paint engine (green flashes), while the optimized transform animation is completely invisible to it.
DevTools Paint Flashing
Green rectangles show exactly where the browser is forced to re-paint pixels.
Click a button above to start its animation.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- Repaints are cheaper than reflows, but still expensive.
- Animating box-shadow, background-color, or border-radius triggers continuous repaints.
- Animate transform and opacity for zero-paint performance.
Done with this concept?
Mark it complete to track your progress. No login needed.