101

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?

Improve this question
3
  • 6
    visibility: hidden keep object in space, so the browser has no need to recalculate dom element position Commented 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. Commented Dec 24, 2014 at 12:53
  • 1
    I came here by seeing the exact statement. Commented Oct 5, 2018 at 19:10

3 Answers 3

Reset to default
144

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

animating a DOM element not necessarily trigger reflow, for eg. if you are using CSS3 property to transform, reflow doesn't happen
Changing visibility to none is not a CSS style change?
@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.
What about adding a CSS variable as inline style? e.g. <html style="--vh: 98px">
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

Improve this answer

Comments

2

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.