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

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

Closed
piecyk wants to merge 1 commit into
TanStack:mainfrom
piecyk:damian/docs/chat-overscroll-behavior
Closed

piecyk wants to merge 1 commit into
TanStack:mainfrom
piecyk:damian/docs/chat-overscroll-behavior

Conversation

@piecyk

@piecyk piecyk commented Sep 14, 2026 •

Copy link
Copy Markdown
Collaborator

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

coderabbitai Bot commented Sep 14, 2026 •

Copy link
Copy Markdown

@nx-cloud

nx-cloud Bot commented Sep 14, 2026 •

Copy link
Copy Markdown

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

pkg-pr-new Bot commented Sep 14, 2026

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant