docs(chat): recommend overscroll-behavior: none on the scroll element by piecyk · Pull Request #1288 · TanStack/virtual

piecyk · 2026-09-14T06:17:15Z

Safari discards a scrollTop write made while an inner scroller is rubber-banding past its top edge and animates back to 0. In a chat that loads history when the user reaches the top, a prepend landing during the bounce loses its anchor write and the reader ends up a whole prepend away from their row (#1287). overscroll-behavior: none suppresses the bounce and closes that window. Verified in Safari 18.4 with a trackpad: the rubber band is gone and prepends anchor as expected.

🎯 Changes

Chat guide production checklist: add overflow-anchor: none (the react chat example already set it, the guide did not mention it) and overscroll-behavior: none with the Safari rationale.
React chat example: overscroll-behavior: none on .Messages.

Refs #1287

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

🤖 Generated with Claude Code

Summary by CodeRabbit

Bug Fixes
- Improved chat scrolling behavior by preventing elastic overscroll and scroll anchoring issues.
- Preserved message positioning when loading earlier messages, including during Safari’s edge-bounce behavior.
Documentation
- Updated the production checklist with required chat scrolling configuration.

Safari discards a scrollTop write made while an inner scroller is rubber-banding past its top edge and animates back to 0. In a chat that loads history when the user reaches the top, a prepend landing during the bounce loses its anchor write and the reader ends up a whole prepend away from their row (TanStack#1287). Suppressing the bounce with `overscroll-behavior: none` closes that window; verified in Safari 18.4. Adds it to the chat guide's production checklist next to `overflow-anchor: none`, which the react chat example already set but the guide did not mention, and applies it to the example's scroller. Refs TanStack#1287 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

coderabbitai · 2026-09-14T06:17:31Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: ed47c66d-beee-487c-8c24-d6c233be7d61

📥 Commits

Reviewing files that changed from the base of the PR and between 2c0a0ea and 61f7f86.

📒 Files selected for processing (2)

docs/chat.md
examples/react/chat/src/index.css

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

📝 Walkthrough

Walkthrough

The chat checklist now requires disabling scroll anchoring and overscroll bounce. The React chat example applies overscroll-behavior: none to the messages element.

Changes

Chat scroll controls

Layer / File(s)	Summary
Scroll configuration guidance and example `docs/chat.md`, `examples/react/chat/src/index.css`	The checklist adds `overflow-anchor: none` and `overscroll-behavior: none`. The `.Messages` rule adds `overscroll-behavior: none` with a Safari-specific explanation.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~4 minutes

Change: Other

Merge Risk: ⚪ Minimal · up to 61f7f

The chat scroll guidance and example include the required scroll controls, with no established merge-blocking risk.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the primary change: documenting the use of overscroll-behavior: none on the chat scroll element. It is concise and matches the pull request changes.
Description check	✅ Passed	The description explains the Safari issue and motivation, lists the documentation and example changes, references the issue, records testing, and completes the checklist and release-impact sections.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

nx-cloud · 2026-09-14T06:18:16Z

View your CI Pipeline Execution ↗ for commit 61f7f86

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	14s	View ↗
`nx run-many --target=build --exclude=examples/**`	✅ Succeeded	21s	View ↗

☁️ Nx Cloud last updated this comment at 2026-09-14 06:18:22 UTC

pkg-pr-new · 2026-09-14T06:18:39Z

More templates

@tanstack/angular-virtual

npm i https://pkg.pr.new/@tanstack/angular-virtual@1288

@tanstack/lit-virtual

npm i https://pkg.pr.new/@tanstack/lit-virtual@1288

@tanstack/marko-virtual

npm i https://pkg.pr.new/@tanstack/marko-virtual@1288

@tanstack/react-virtual

npm i https://pkg.pr.new/@tanstack/react-virtual@1288

@tanstack/solid-virtual

npm i https://pkg.pr.new/@tanstack/solid-virtual@1288

@tanstack/svelte-virtual

npm i https://pkg.pr.new/@tanstack/svelte-virtual@1288

@tanstack/virtual-core

npm i https://pkg.pr.new/@tanstack/virtual-core@1288

@tanstack/vue-virtual

npm i https://pkg.pr.new/@tanstack/vue-virtual@1288

commit: 61f7f86

piecyk mentioned this pull request Sep 14, 2026

fix(virtual-core): gate the iOS scroll-adjustment deferral on touch provenance #1280

Open

4 tasks

Navigation Menu

Uh oh!

docs(chat): recommend overscroll-behavior: none on the scroll element - #1288

docs(chat): recommend overscroll-behavior: none on the scroll element#1288
piecyk wants to merge 1 commit into
TanStack:mainfrom
piecyk:damian/docs/chat-overscroll-behavior

piecyk commented Sep 14, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Sep 14, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

nx-cloud Bot commented Sep 14, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Sep 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

piecyk commented Sep 14, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

nx-cloud Bot commented Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Sep 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

piecyk commented Sep 14, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Sep 14, 2026 •

edited

Loading

nx-cloud Bot commented Sep 14, 2026 •

edited

Loading