Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

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


Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
Scroll stuff
  • elem.scrollBy(), elem.scrollTo()
  • elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
  • elem.scrollWidth, elem.scrollHeight
  • elem.scrollLeft, elem.scrollTop also, setting them
  • elem.focus() can trigger a double forced layout (source)
  • elem.computedRole, elem.computedName
  • elem.innerText (source)


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

window.getComputedStyle() will force layout, as well, if any of the following is true:

  1. The element is in a shadow tree
  2. There are media queries (viewport-related ones). Specifically, one of the following: (source)
  • 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


  • window.scrollX, window.scrollY
  • window.innerHeight, window.innerWidth
  • window.getMatchedCSSRules() only forces style


  • inputElem.focus()
  •, (source)

Mouse events

  • mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY (source)


  • doc.scrollingElement only forces style


  • range.getClientRects(), range.getBoundingClientRect()



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


  • If layout is forced, style must be recalculated first. So forced layout triggers both operations. Their costs are very dependent on the content/situation, but typically both operations are similar in cost.
Browsing the Chromium source:

CSS Triggers

CSS Triggers is a related resource and all about what operations are required to happen in the browser lifecycle as a result of setting/changing a given CSS value. It's a great resource. The above list, however, are all about what forces the purple/green/darkgreen circles synchronously from JavaScript.

More on forced layout

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.