[labs/virtualizer] `averageMarginSize` in metrics cache is off
- 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
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