Reflow

As explained in CSS in Depth, Second Edition

Reflow is recomputation of document layout after a change affects the size or position of elements.

Reflow is the browser’s recomputation of document layout after a change affects an element’s size or position. Because document flow lets one element influence many others, the browser recalculates the layout of elements that move or resize as a result. section 16.3.1

Changes that can require reflow include:

• Changing an element’s width or height. section 16.3.1
• Adjusting position properties such as top or left. section 16.3.1
• Inserting or removing an element from the DOM with JavaScript. section 16.3.1
• Changing a background color does not require layout recomputation because it does not affect sizing or position; it requires repainting instead. section 16.3.1

Figure 16.12 The three stages of the rendering pipeline

Use the rendering-pipeline diagram to distinguish layout and reflow from the later paint and composite stages. section 16.3.1

How CSS in Depth, Second Edition covers it

How deep it goes

Defines reflow and identifies its triggers, stopping short of detailed browser implementation internals.

Examples

Uses width, height, top, left, DOM insertion or removal, and background-color changes as contrasting cases.

What you can do after

Diagnose whether a visual change requires layout recomputation or only repainting.

How it connects

Connects reflow with document flow, layout, paint, composite, and the DOM.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

• DOM fragmentaddressed by · A DOM fragment is a lightweight, detached node that can hold a subtree of nodes independently of a document tree.
• zoomproduced by · Browser zoom is a user-controlled display-scaling feature that enlarges or reduces a rendered page and may cause its layout to reflow.
• translateY()contrasts with · The CSS translateY() transform function moves an element vertically along the y-axis by a specified distance.
• WCAGconfigured by · WCAG is a W3C standard providing testable recommendations and success criteria for making web content accessible to people with disabilities.

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.