Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Adding annotation in `FileDiff` + `Virtualizer` causes scroll jump

Open
  • Is something wrong?
#1,075 10 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript
Domain
frontend, performance

Research direction

Start with the attached reproduction and README notes, then trace how FileDiff and Virtualizer handle annotation updates, especially syncLineAnnotations and resetLayoutCache. Compare this with CodeView's scroll handling and investigate whether annotation-only changes invalidate measured heights. Done means adding annotations above the viewport no longer causes a scroll jump in the reproduction.

Written by the indexing model from the issue text.

Description

Inserting an annotation with many hunks above causes a scroll jump. This affects FileDiff, not CodeView.

Reproduction

Source: diffs-jump.tar.gz

The README.md includes agent notes on the alleged cause and possible solutions. I also paste it below:

Notes

Mechanism

  • Changing the lineAnnotations array identity makes
    VirtualizedFileDiff.syncLineAnnotations call resetLayoutCache(),
    which wipes all measured heightDeltas for the file (here: 60
    annotation rows ≈ 28px each), even though annotations never renumber
    lines.
  • The file re-renders at estimated line heights synchronously in the
    React commit (and forces a reflow mid-commit), so content above the
    viewport transiently shrinks by the forgotten corrections.
  • Chromium's native scroll anchoring (overflow-anchor: auto, the
    default on the scroll container) "corrects" scrollTop against that
    transient layout. The virtualizer then re-measures only the rows near
    the new position, so nothing ever moves the scroll back.

Two independent changes each make the jump disappear, pointing at the
two halves of the bug:

  • overflow-anchor: none on the scroll container — this is exactly
    what CodeView (advanced mode) does in setup(), plus its own
    anchor-capture/correction per render pass, which is why CodeView
    apps don't hit this. Simple mode never got that treatment.
  • Preserving heightDeltas across annotation-only resets (they stay
    valid — annotation changes don't shift line indexes). Document edits
    (applyDocumentChange, the other reset site) need the keys remapped
    by the edit's line delta instead — the transform the editor already
    applies to annotations — plus the capturePendingLayoutAnchor
    bracket that advanced mode has and simple mode lacks, to absorb the
    residual error around the caret.

Demo

https://github.com/user-attachments/assets/696676e3-a390-4f18-9b83-63e93b889915

Dominant language
TypeScript
Stars
6.2k
Forks
226
Avg merge
1d 13h
Merged PRs (30d)
33

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from pierrecomputer/pierre

All issues in pierrecomputer/pierre

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.