perf: skip render of off-screen log cells via content-visibility

With logs up to ~25 000 entries, eagerly painting every grid cell
caused multi-second freezes on page load. Add content-visibility:
auto to the line-number and content cells so the browser defers
their layout / paint until they scroll into view.

The rule lives on the cells (not on .entry itself) because .entry
uses display: contents and produces no box of its own.
contain-intrinsic-size: auto 1.5em lets the browser remember
measured heights after first paint and uses ~one line tall as the
initial placeholder for never-seen cells.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-06 19:39:01 +00:00
parent aeef6bc0cd
commit 47303d6812

View File

@@ -950,6 +950,24 @@ main {
width: 100%; width: 100%;
} }
/*
* Skip layout / paint of off-screen log cells until they scroll into
* view. With logs running up to ~25 000 entries the eager render of
* every cell is what causes the multi-second freeze on initial load.
*
* `.entry` itself is `display: contents` (no box), so the rule has to
* land on the actual grid items it produces. `contain-intrinsic-size:
* auto 1.5em` lets the browser remember measured heights after first
* paint and falls back to ~one line tall as the placeholder for
* never-seen cells. Multi-line stack traces correct on first pass; the
* scroll position adjusts once.
*/
.log-inner .line-number-container,
.log-inner .line-content {
content-visibility: auto;
contain-intrinsic-size: auto 1.5em;
}
.log-inner .entry.entry-error .line-content, .log-inner .entry.entry-error .line-content,
.log-inner .entry.entry-error .line-number-container{ .log-inner .entry.entry-error .line-number-container{
background-color: var(--error-bg); background-color: var(--error-bg);