Browser & Web Performance · Senior · Question 13 of 75

What does `content-visibility: hidden` do differently from `display: none`?

1It still renders the content but makes it transparent
✓Correct answer: It skips rendering the content but keeps its rendering state, so showing it again is cheaper
3It removes the element from the DOM

Explanation

Useful for inactive tabs or virtualized views that will be shown again; display: none throws away layout boxes.

Further reading

Test yourself

Take the Browser & Web Performance · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.