Review
Skip offscreen chapbook cards with content-visibility
Ridgeline Press's seasonal chapbook grid paints every cover when editors scroll the spring list on a tablet. Apply content-visibility: auto so the browser can skip rendering offscreen cards, pair it with contain-intrinsic-size so the scrollbar and Tab order stay stable, and keep titles in the accessibility tree (auto, not hidden).
CSSTier 1cssperformancecontent-visibility
Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.
src/catalog/ChapbookCard.module.css+4-1
| 1 | 1 | .card { | |
| 2 | 2 | display: flex; | |
| 3 | 3 | flex-direction: column; | |
| 4 | 4 | gap: 0.75rem; | |
| 5 | 5 | padding: 1rem; | |
| 6 | 6 | border: 1px solid var(--ink-150); | |
| 7 | 7 | border-radius: 0.75rem; | |
| 8 | 8 | background: var(--paper); | |
| 9 | - | /* full paint on every card — janks past ~80 rows */ | |
| 9 | + | /* skip paint/layout for offscreen cards; keep a11y + find-in-page */ | |
| 10 | + | content-visibility: auto; | |
| 11 | + | /* size placeholder until first paint; auto remembers last height */ | |
| 12 | + | contain-intrinsic-size: auto 320px; | |
| 10 | 13 | } | |
| 11 | 14 | ||
| 12 | 15 | .cover { | |
| 13 | 16 | aspect-ratio: 2 / 3; | |
| 14 | 17 | object-fit: cover; | |
| 15 | 18 | border-radius: 0.5rem; | |
| 16 | 19 | background: var(--ink-50); | |
| 17 | 20 | } | |
| 18 | 21 | ||
| 19 | 22 | .title { | |
| 20 | 23 | font: 600 1rem/1.3 var(--serif); | |
| 21 | 24 | color: var(--ink-900); | |
| 22 | 25 | } | |
| 23 | 26 | ||
| 24 | 27 | .card:focus-within { | |
| 25 | 28 | outline: 2px solid var(--brand-500); | |
| 26 | 29 | outline-offset: 2px; | |
| 27 | 30 | } |