Hiding and showing elements should be done with visibility: hidden/visible or with display: none/block (or inline-block, flex, etc.). One of the two can be used, but there are cases in which one is better than the other. In most cases using display is the better solution for hiding elements because the document will be rendered as if those elements didn't exist in it. In cases where animation is applied to an element, visibility/display should be applied after the animation ends.

Display vs Visibility property

In this section we will emphasize on the comparison between the two and answer which and why should be used in a given case.

Display property Pros:

• Hides an element and its children. Document will be rendered as if those elements didn't exist in it which translates to increased performance and responsiveness of the UI.
• Display: none is the fastest way to hide elements from the scene performance-wise. Hiding elements with visibility: hidden causes a bigger Paint then display:none because it doesn't exclude the elements from the document, just hides them visually.
• Display: none - recommended to be used on element whose animation is no longer relevant to the scene. After the same element is displayed, the animation will be restarted from the beginning. If visibility is used, the element is still rendered and the continuing animation can cause other elements to be redrawn if it goes "over" them.
• Display: none gives the option to place another element in the place of the hidden one in case the two elements aren't absolutely positioned.
• It is highly recommended to use display: none for hiding entire screens/scenes. Bigger elements have a bigger chance to go over other elements and cause redraws as mentioned earlier.

Note

Best practice when displaying elements is to change the content of the element before displaying it back on the screen. This will ensure no secondary Layouts, Paints and Style recalculations are done. Changing the content of an element while it is hidden with display: none - there is a very brief Recalculate Style done.

Display property Cons:

Displaying many elements back on the screen will cause drop in performance than when using visibility: visible because the elements should take back its place on the screen and recalculate their styles (background color, geometry, etc.). A workaround is to display elements on portions. For example - firstly displaying buttons/icons, then minimap and then a list of items. Making elements to appear in portions will not bottleneck frames.

Visibility property Pros:

• Visibility: hidden is good for temporarily hiding an element from the scene. Especially if this element has some animation which should continue running for the period it is hidden.
• Hiding an element with visibility: hidden preserves the element's place and dimensions in the document and doesn't change the position of other elements.

Visibility property Cons:

• Do not use visibility: hidden to hide entire scenes/screens or very big elements. Even though an element is not visible, it is still in the document flow. Furthermore it still affects other elements and even if it is in its own layer, it can still have diminishing effects. If one element is hidden and another is placed on top of it, this will cause heavier Paints if there is some interaction on it or an animation is applied to any one of them.
• If an element has an animation and it is hidden, the animation will still run which will have an impact on the performance. Use visibility: hidden only if the animation should stay active.
• Do not use only visibility: hidden. More elements in the document flow means less performance.

Summary - display vs visibility

When choosing between display or visibility property, it must be taken into consideration their intended purpose. In short - visibility should be used to hide and show an element which needs to stay in the document flow at all times. Hiding an element will allow an animation to continue running and it can be paused to preserve its current state. Display: none should be used to hide/disable no longer needed elements in the context of the scene and increase the responsiveness of the UI.