Visibility property in CSS - Performance & Optimization

Performance: Visibility property

MEDIUM IMPACT

Controls whether an element is visible or hidden without removing it from the layout, affecting paint and compositing.

Hiding an element without causing layout shifts

CSS

element.style.visibility = 'hidden';

Keeps element in layout, preventing reflow and layout shifts.

📈 Performance GainNo reflow triggered, reduces CLS impact

Hiding an element without causing layout shifts

CSS

element.style.display = 'none';

Removes element from layout causing reflow and layout shifts.

📉 Performance CostTriggers 1 reflow and layout recalculation causing CLS

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
visibility:hidden	No DOM changes	0 reflows	Paints hidden element (medium cost)	[OK]
display:none	No DOM changes	1 reflow per element hidden	No paint for hidden element	[OK] Good

Rendering Pipeline

Visibility property affects the paint and composite stages by controlling element visibility without layout changes.

→Paint

→Composite

⚠️ BottleneckPaint stage due to rendering hidden elements

Core Web Vital Affected

CLS

Controls whether an element is visible or hidden without removing it from the layout, affecting paint and compositing.

Optimization Tips

1Use visibility:hidden to hide elements without causing layout shifts.

2Avoid hiding many large elements with visibility:hidden to reduce paint cost.

3Use display:none to remove elements from layout and avoid painting when layout shifts are acceptable.

Performance Quiz - 3 Questions

Which CSS property hides an element but keeps its space in the layout?

A opacity:0

B visibility:hidden

C display:none

D position:absolute

DevTools: Performance

How to check: Record a performance profile while toggling visibility and display properties; observe reflows and paint events.

What to look for: Look for layout shifts and paint durations; display:none triggers layout recalculation, visibility:hidden triggers paint but no reflow.

Practice

1. What does the CSS property visibility: hidden; do to an element on a webpage?

easy

A. It makes the element transparent but still clickable.

B. It hides the element but keeps its space reserved on the page.

C. It removes the element completely from the page layout.

D. It changes the element's color to match the background.

Solution

1. Step 1: Understand the visibility property

   The visibility property controls whether an element is visible or hidden but does not affect layout space.

2. Step 2: Analyze the effect of hidden

   When set to hidden, the element is not shown but still occupies space on the page.

3. Final Answer:

   It hides the element but keeps its space reserved on the page. -> Option B

4. Quick Check:

   visibility: hidden hides but keeps space [OK]

Hint: Hidden keeps space, display none removes it [OK]

Common Mistakes:

• Confusing visibility: hidden with display: none
• Thinking hidden elements are clickable
• Assuming hidden elements disappear completely

2. Which of the following is the correct CSS syntax to hide an element but keep its space using the visibility property?

easy

A. visibility: hidden;

B. visibility = hidden;

C. visible: hidden;

D. hide: visibility;

Solution

1. Step 1: Recall correct CSS property syntax

   CSS properties use a colon : between property and value, ending with a semicolon.

2. Step 2: Match syntax to visibility property

   The correct syntax is visibility: hidden; to hide but keep space.

3. Final Answer:

   visibility: hidden; -> Option A

4. Quick Check:

   Property: value; is correct CSS syntax [OK]

Hint: Use colon, not equals, for CSS properties [OK]

Common Mistakes:

• Using equals sign instead of colon
• Swapping property and value order
• Using non-existent CSS properties

3. Consider this HTML and CSS:

<div style="visibility: hidden; background: red; width: 100px; height: 100px;">Box</div>

What will you see on the webpage?

medium

A. A transparent box with the text 'Box' visible.

B. A red box with the text 'Box' visible.

C. No space or box visible at all.

D. No red box or text, but space is reserved where the box would be.

Solution

1. Step 1: Analyze the visibility property effect

   The style visibility: hidden; hides the element but keeps its space on the page.

2. Step 2: Understand the visual output

   The red box and text are hidden, so nothing is visible, but the space of 100x100 pixels remains empty.

3. Final Answer:

   No red box or text, but space is reserved where the box would be. -> Option D

4. Quick Check:

   visibility: hidden hides content but keeps space [OK]

Hint: Hidden means invisible but space stays [OK]

Common Mistakes:

• Expecting the box to be visible
• Confusing with display:none which removes space
• Thinking text remains visible

4. You wrote this CSS but the element still shows on the page:

.hidden-box { visibility = hidden; }

What is the error?

medium

A. The syntax uses '=' instead of ':'.

B. The property name should be 'visible' not 'visibility'.

C. The class selector should start with '#', not '.'.

D. The value 'hidden' is invalid for visibility.

Solution

1. Step 1: Check CSS property syntax

   CSS uses a colon : to assign values, not an equals sign =.

2. Step 2: Identify the syntax error

   The code uses visibility = hidden; which is invalid syntax and ignored by browsers.

3. Final Answer:

   The syntax uses '=' instead of ':'. -> Option A

4. Quick Check:

   Use colon for CSS property assignment [OK]

Hint: CSS uses colon, not equals, for properties [OK]

Common Mistakes:

• Using '=' instead of ':' in CSS
• Confusing class selector '.' with id selector '#'
• Assuming 'hidden' is invalid value

5. You want to hide a button but keep the page layout stable so other elements don't move. Which CSS property and value should you use?

hard

A. display: none;

B. position: absolute; left: -9999px;

C. visibility: hidden;

D. opacity: 0;

Solution

1. Step 1: Understand layout impact of hiding methods

   display: none; removes element and space, opacity: 0; hides visually but keeps clickable, position: absolute; left: -9999px; moves element off screen.

2. Step 2: Choose method that hides but keeps space

   visibility: hidden; hides element but keeps its space, keeping layout stable.

3. Final Answer:

   visibility: hidden; -> Option C

4. Quick Check:

   visibility: hidden hides but keeps space [OK]

Hint: Use visibility hidden to keep space but hide element [OK]

Common Mistakes:

• Using display:none which removes space
• Using opacity:0 but element remains interactive
• Moving element off screen breaks accessibility