perf(ui): defer off-screen layout/paint on entry and feed list rows

Miniflux' default user.EntriesPerPage value is 100, so people with a lot of
feeds/feed items might have 100 items displayed by default, which is a ton of
DOM elements: multiple inline SVG icons, two <button>, optional <time>,
optional reading-time chip, category tag, … the browser had to lay out and
paint all of it on initial render even though there are only a handful of rows
visible at once.

Setting content-visibility: auto on .entry-item and .feed-item lets
the browser skip layout, paint, and accessibility-tree work for rows
that fall outside the viewport, doing it lazily as the user scrolls.
contain-intrinsic-size: auto reserves a placeholder using each row's
last rendered size so the scrollbar and anchor scrolling stay
consistent after first measurement. The value 100px was picked as on my
machine/screen/…, a feed-item is a bit less than 100px, and an entry-item is
a bit more than 80px.

This doesn't introduced any regressions in keyboard shortcuts, both from
miniflux and from the browser. The two CSS properties are supported in current
modern browsers, and are simply ignored in those that don't.

Sources used:

- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/contain-intrinsic-size
This commit is contained in:
jvoisin
2026-06-02 23:12:39 +02:00
committed by fguillot
parent 8528e5e650
commit e7888e3d43
+6
View File
@@ -828,6 +828,12 @@ dialog {
overflow: hidden;
}
.entry-item,
.feed-item {
content-visibility: auto;
contain-intrinsic-size: auto 100px;
}
.item.current-item {
border: var(--current-item-border-width) solid var(--current-item-border-color);
padding: 3px;