Repaint

Introduction

Repaint records draw operations when visual properties change without geometry changes — color, background, visibility, outline. Cheaper than reflow but still main-thread work. Chrome labels these Paint events in DevTools Performance.

Large repaint regions (full viewport background changes, filter on body) hurt scroll performance. Prefer promoting animated elements to layers when repaint cost is high.

Business problem

Business pressure: Product teams need CSS repaint to ship polished UI without layout regressions, accessibility lawsuits, or LCP regressions that hurt conversion.

• Conversion: Visual polish and performance directly affect checkout and signup funnels.
• Brand: Inconsistent CSS repaint implementation fragments design system trust.
• Velocity: CSS debt slows every feature team — architecture matters at scale.

Why this feature exists

Platform history: CSS evolved CSS repaint to solve author needs without JavaScript layout engines or table hacks.

• Problem solved: Declarative styling separated from document structure.
• Rejected alternative: Inline styles and JS layout — unmaintainable at enterprise scale.

Browser rendering perspective

Paint pipeline:

• Chrome: Paint generates DisplayItemList; Skia rasterizes tiles; invalidation regions limit repaint scope.
• Firefox: WebRender path reduces CPU paint on supported GPUs.
• Safari: Tile-based painting; large shadows and filters expensive on mobile GPU.

Internal browser workflow

Workflow: Selector match → cascade → computed values → layout tree → paint layers → composite.

Feature deep dive

Repaint vs reflow: Changing color repaints; changing width reflows then repaints. Some properties only composite (opacity, transform on promoted layer).

• will-change: Hints promotion — overuse causes memory pressure.
• DevTools Rendering: Paint flashing highlights repainted areas green.

Real production example

Production: Netflix, Amazon, and Shopify enforce CSS repaint patterns via design tokens, lint rules, and visual regression CI.

Enterprise use case

Enterprise: Design systems (Polaris, Carbon, Atlassian) codify CSS repaint in token pipelines and component APIs.

Accessibility considerations

A11y: CSS must not remove focus visibility, break zoom, or convey state by color alone (WCAG 2.2).

Performance considerations

Performance: CSS repaint can trigger reflow, expensive selectors, or layer explosion — profile with DevTools Performance panel.

SEO considerations

SEO: CSS affects LCP, CLS, and mobile usability — ranking signals tied to Core Web Vitals.

Scalability considerations

Scale: CSS repaint choices compound across micro-frontends, white-label tenants, and dark-mode variants.

Common production issues

Production failures: Specificity wars, z-index stacks, and responsive breakpoints that work in Chrome but break Safari.

Debugging guide

Find repaint hotspots: DevTools → Rendering → Paint flashing. Performance → Paint events correlated with scroll.

• Fix: Reduce shadow/blur on scrolling containers; isolate animation to smaller layer.

Hands-on exercise

Exercise: Implement CSS repaint in a component that passes axe, Lighthouse performance ≥ 90, and visual regression snapshot.

Try it yourself

Edit the CSS panel — the preview updates live. Use DevTools Performance and Accessibility panels to validate.

Summary

Repaint records and rasterizes visual changes without geometry updates. Profile Paint events and limit invalidation region size.

Key takeaways

• Repaint updates pixels without layout — still costs main thread.
• Use Paint flashing to find unnecessary full-page repaints.
• Promote heavy animations to layers when repaint dominates.