89

I was reading about the difference between two CSS properties display:none and visibility:hidden and encountered the DOM reflow term.

The statement was

display: none causes a DOM reflow whereas visibility: hidden does not.

So my question is:

What is DOM reflow and how does it work?

3
  • 6
    visibility: hidden keep object in space, so the browser has no need to recalculate dom element position
    – Hacketo
    Dec 24, 2014 at 12:51
  • 7
    Simply said, DOM Reflow is when your browser needs to recalculate the position/size of you DOM elements in order to display a page. In your specific example, you probably noticed that a visibility: hidden element seems to still be there (the space needed to show it is still taken, it is still "in the flow", just invisible) while a display: none element takes your element completely out of the flow.
    – Laurent S.
    Dec 24, 2014 at 12:53
  • 1
    I came here by seeing the exact statement.
    – Jry9972
    Oct 5, 2018 at 19:10

3 Answers 3

132

A reflow computes the layout of the page. A reflow on an element recomputes the dimensions and position of the element, and it also triggers further reflows on that element’s children, ancestors and elements that appear after it in the DOM. Then it calls a final repaint. Reflowing is very expensive, but unfortunately it can be triggered easily.

Reflow occurs when you:

  • insert, remove or update an element in the DOM
  • modify content on the page, e.g. the text in an input box
  • move a DOM element
  • animate a DOM element
  • take measurements of an element such as offsetHeight or getComputedStyle
  • change a CSS style
  • change the className of an element
  • add or remove a stylesheet
  • resize the window
  • scroll

For more information, please refer here: Repaints and Reflows: Manipulating the DOM responsibly

4
  • 3
    animating a DOM element not necessarily trigger reflow, for eg. if you are using CSS3 property to transform, reflow doesn't happen
    – Nitish
    Jan 16, 2017 at 18:37
  • 4
    Changing visibility to none is not a CSS style change?
    – Qwerty
    Sep 26, 2017 at 19:40
  • 1
    @Qwerty There are lots of style changes, which can cause reflow, so I guess that's why they are saying "change a CSS style" globally. Dec 19, 2018 at 7:48
  • 1
    What about adding a CSS variable as inline style? e.g. <html style="--vh: 98px">
    – ifthenelse
    Nov 23, 2021 at 15:18
17

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document.

https://developers.google.com/speed/articles/reflow

display:none hide the div as if the div is not rendered whereas visibility:hidden only hides but the space is still occupied

0
1

It means, that if you will set display: none;, your browser will recalculate positions of DOM elements, if visibility: hidden; - not. Think, it because visibility: hidden; does not change element sizes in DOM.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.