Reflow

Introduction

Reflow (layout) recalculates element geometry when the layout tree becomes dirty. Reading offsetWidth after mutating width forces synchronous layout — layout thrashing. Batch DOM reads and writes; use CSS transforms for movement.

In Chrome DevTools Performance, reflow appears as purple Layout blocks. High-frequency reflow during scroll or animation causes jank and hurts Interaction to Next Paint (INP).

Business problem

Business pressure: Product teams need CSS reflow (layout) 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 reflow (layout) 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 reflow (layout) 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

Reflow scope: Engines mark dirty subtrees; incremental layout tries to limit work — but wide dirty roots (body class toggle) reflow entire documents.

• Chrome: LayoutNG dirty bit propagation; forced layout style flush on synchronous geometry queries.
• Firefox: Similar forced reflow on getBoundingClientRect during pending mutations.
• Safari: Main-thread layout; test iOS scroll jank when animating top/left.

Internal browser workflow

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

Feature deep dive

Forced synchronous layout: JS reads geometry → engine must flush pending style/layout → returns value → next write invalidates again.

• Batch pattern: Read all measurements first, then apply all writes.
• CSS: Prefer transform: translate over top/left for movement.
• contain: layout strict isolates reflow bubble.

Real production example

Production: Netflix, Amazon, and Shopify enforce CSS reflow (layout) patterns via design tokens, lint rules, and visual regression CI.

Enterprise use case

Enterprise: Design systems (Polaris, Carbon, Atlassian) codify CSS reflow (layout) 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 reflow (layout) 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 reflow (layout) choices compound across micro-frontends, white-label tenants, and dark-mode variants.

Common production issues

Production reflow incidents: Sticky header JS reading scroll + setting height every frame; DataTables measuring every row on sort; responsive images without dimensions causing cascade reflow.

• Fix: requestAnimationFrame batching, ResizeObserver debounce, explicit img width/height.

Debugging guide

Debug: Chrome DevTools → Elements (computed styles), Layout panel, Rendering layers, Coverage for unused CSS.

Hands-on exercise

Exercise: Implement CSS reflow (layout) 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

Reflow is layout recalculation triggered by geometric changes or forced geometry reads. Batch DOM operations and choose composite-friendly CSS properties.

Key takeaways

• Reflow recalculates layout — expensive at scale.
• Forced sync layout from read/write interleaving is a top INP killer.
• Profile Layout events; use transform/opacity for motion.