---
title: "rendering content visibility"
description: "Apply `content-visibility: auto` to defer off-screen rendering."
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/rendering-content-visibility
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:37:36.455Z
license: CC-BY-4.0
attribution: "rendering content visibility — Claudary (https://claudary.paisolsolutions.com/skills/rendering-content-visibility)"
---

# rendering content visibility
Apply `content-visibility: auto` to defer off-screen rendering.

## Overview

---
title: CSS content-visibility for Long Lists
impact: HIGH
impactDescription: faster initial render
tags: rendering, css, content-visibility, long-lists
---

## CSS content-visibility for Long Lists

Apply `content-visibility: auto` to defer off-screen rendering.

**CSS:**

```css
.message-item {
  content-visibility: auto;
  contain-intrinsic-size: 0 80px;
}
```

**Example:**

```tsx
function MessageList({ messages }: { messages: Message[] }) {
  return (
    <div className="overflow-y-auto h-screen">
      {messages.map(msg => (
        <div key={msg.id} className="message-item">
          <Avatar user={msg.author} />
          <div>{msg.content}</div>
        </div>
      ))}
    </div>
  )
}
```

For 1000 messages, browser skips layout/paint for ~990 off-screen items (10× faster initial render).

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/rendering-content-visibility) · https://claudary.paisolsolutions.com