Properties and Methods That Trigger Layout Reflow in Browsers

This article, originally published in the Qiwuzhou Weekly by front‑end engineer He Wenli (also a W3C CSS Working Group member), translates a comprehensive list of DOM properties and methods that force browsers to perform a synchronous style and layout calculation, commonly known as a reflow.

Element Measurements

elem.offsetLeft , elem.offsetTop , elem.offsetWidth , elem.offsetHeight , elem.offsetParent

elem.clientLeft , elem.clientTop , elem.clientWidth , elem.clientHeight

elem.getClientRects() , elem.getBoundingClientRect()

Scrolling‑Related APIs

elem.scrollBy() , elem.scrollTo()

elem.scrollIntoView() , elem.scrollIntoViewIfNeeded()

elem.scrollWidth , elem.scrollHeight

elem.scrollLeft , elem.scrollTop (setting these also triggers layout)

Focus

elem.focus() – forces two forced layouts

Other Element Properties

elem.computedRole , elem.computedName

elem.innerText

getComputedStyle

Calling window.getComputedStyle() usually forces style recalculation and can trigger a forced layout when any of the following conditions are met:

The element belongs to a shadow tree.

A media query such as min-width , max-height , etc., is evaluated.

Aspect‑ratio related queries ( aspect-ratio , min-aspect-ratio , max-aspect-ratio ) are used.

Device‑pixel‑ratio or resolution queries are evaluated.

Accessing properties like height , width , top , right , bottom , left , or margin/padding values when they are concrete numbers.

Reading transform‑related properties ( transform , transform-origin , perspective-origin ) or CSS grid properties ( grid , grid-template , etc.).

Window Object

window.scrollX , window.scrollY

window.innerHeight , window.innerWidth

window.getMatchedCSSRules() – only triggers style recalculation.

Form Elements

inputElem.focus()

inputElem.select() , textareaElem.select()

Mouse Events

mouseEvt.layerX , mouseEvt.layerY , mouseEvt.offsetX , mouseEvt.offsetY

Document

doc.scrollingElement – only causes style recalculation.

Range

range.getClientRects() , range.getBoundingClientRect()

SVG & contenteditable

Various SVG‑related layout triggers are documented in Tony Gentilcore’s 2011 Layout Triggering List, and many actions (including pasting images) in a contenteditable region also cause reflows.

Appendix

DOM mutations (class changes, node insertions/removals, pseudo‑class additions) typically cause reflows.

Forcing layout first recomputes styles, so both style recalculation and layout happen together.

Simple Mitigations

Avoid forced layouts inside loops and avoid frequent DOM changes.

Use dev‑tools to identify code that triggers layout.

Batch DOM reads/writes (e.g., with FastDOM or a virtual‑DOM library).

Browser‑Specific Data

The data presented is derived from reading Blink source code and applies to Chrome, Opera, and most Android browsers. Similar behavior is observed in WebKit (via Tony Gentilcore’s list) and Gecko (via FrameNeedsReflow ). Edge/IE follow the standards, though exact performance may vary.

Chromium Source References

UpdateStyleAndLayoutIgnorePendingStylesheets – forces layout and style recomputation.

UpdateStyleAndLayoutTreeIgnorePendingStylesheets – forces style recomputation only.

Additional Resources

CSS Triggers provides a detailed lookup of what each CSS change does internally. Further reading includes Web Fundamentals on avoiding layout thrashing, Matt Andrews’ real‑world fixes, Google Chrome’s layout‑diagnosing demo, Wilson Page’s layout‑thrashing guide, FastDOM, Stoyan’s rendering notes, Fog Creek’s performance case study, PageSpeed Insights, iOS UIWebView optimization, Chrome’s accelerated rendering, and the “Jank Free” series.