lit / lit/lit

[labs/virtualizer] `averageMarginSize` in metrics cache is off

Open
#4,827 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
21.8k
Forks
1.1k
Avg merge
18h 25m
Merged PRs (30d)
2

Description

### Which package(s) are affected?

Virtualizer (@lit-labs/virtualizer)

### Description

Given a list of 10000 items and each item having a height of 32px and a bottom margin of 2px, the `averageMarginSize` is not 2px, but ~1.95px. This is due to the first item:

```
const a = this._metricsCache.get(k)?.[leadingMargin(direction)] || 0;
const b = this._metricsCache.get(k - 1)?.[trailingMargin(direction)] || 0;
this._marginSizeCache.set(k, collapseMargins(a, b));
```

For the first item (`k === 0`), `b` falls through and becomes `|| 0`.

If i scroll to item with index 3000 in the list, this causes a delta of `102034 - 101893 = 141px`.

Perhaps the margin size of the first item should not be cached so as not to "dirty" the cache?

Also, usually the first item in a list has no top margin.

### Reproduction

-

### Workaround

-

### Is this a regression?

No or unsure. This never worked, or I haven't tried before.

### Affected versions

Latest

### Browser/OS/Node environment

-

Contributor guide

Open the contributing guide

Research direction

Start in the @lit-labs/virtualizer metrics-cache code around _metricsCache and the margin-size calculation shown in the issue. Reproduce the 10,000-item list with 32px heights and 2px bottom margins, then check the first-item handling and scrolling to item 3000. Done means averageMarginSize reflects the expected margin and the reported scroll delta is resolved.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.