What forces layout/reflow in Chrome. The comprehensive list.

what-forces-layout.md

What forces layout

All of the below properties or methods, when requested/called in JavaScript, will force the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

• elem.offsetLeft;

• elem.offsetTop;

• elem.offsetWidth;

• elem.offsetHeight;

• elem.offsetParent;

• elem.clientLeft;

• elem.clientTop;

• elem.clientWidth;

• elem.clientHeight;

• elem.scrollWidth;

• elem.scrollHeight;

• elem.scrollLeft; // also setting it

• elem.scrollTop; // also setting it

• elem.computedRole;

• elem.computedName;

• elem.innerText; (source)

• elem.scrollIntoView();

• elem.scrollIntoViewIfNeeded();

• elem.scrollBy();

• elem.scrollTo();

• elem.getClientRects();

• elem.getBoundingClientRect();

• elem.focus(); // can trigger a *double* forced layout (source)

Range

• range.getClientRects();
• range.getBoundingClientRect();

Mouse events

• mouseEvt.layerX;
• mouseEvt.layerY;
• mouseEvt.offsetX;
• mouseEvt.offsetY;

source

getComputedStyle

window.getComputedStyle(); // will typically force style recalc source

window.getComputedStyle(); // will force layout, as well, if one of the following:

1. The element is in a shadow tree
2. There are media queries (viewport-related ones); specifically, one of the following: (MediaQueryExp.cpp - Code Search)

• min-width, min-height, max-width, max-height, width, height
• aspect-ratio, min-aspect-ratio, max-aspect-ratio
• device-pixel-ratio, resolution, orientation

1. The property requested is one of the following: (source)

• height, width
• top, right, bottom, left
• margin [-top, -right, -bottom, -left, or shorthand] only if the margin is fixed.
• padding [-top, -right, -bottom, -left, or shorthand] only if the padding is fixed.
• transform, transform-origin, perspective-origin
• translate, rotate, scale
• webkit-filter, backdrop-filter
• motion-path, motion-offset, motion-rotation
• x, y, rx, ry

document

• doc.scrollingElement; // only forces style

window

• window.scrollX;

• window.scrollY;

• window.innerHeight;

• window.innerWidth;

• window.getMatchedCSSRules(); // only forces style

Forms

• inputElem.select();
• textareaElem.select();

source

contenteditable

• Lots & lots of stuff
• …including copying an image to clipboard source

Appendix

Browsing the Chromium source:

• forced layout (and style recalc): updateLayoutIgnorePendingStylesheets - Chromium Code Search
• forced style recalc: updateLayoutTree - Chromium Code Search`