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 whereasvisibility: hidden
does not.
So my question is:
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 whereasvisibility: hidden
does not.
So my question is:
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
For more information, please refer here: Repaints and Reflows: Manipulating the DOM responsibly