fix(chat): eliminate streaming scroll jank (0.0.8)#172
Merged
Conversation
Profiled the auto-scroll-to-bottom effect during real LLM streaming
and found it was firing 37 scrollTo() calls in 2.87s — 33 of them
with `behavior: 'smooth'`. Each smooth-scroll animation queues
behind the previous one and gets interrupted before completing,
producing visibly jerky scroll throughout streaming.
Fix: drop `requestAnimationFrame(() => scrollTo({ behavior }))` and
use direct `scrollTop = scrollHeight`. That's instant, idempotent,
and no animation queue to thrash. Same effect, none of the jank.
Verified live with the smoke app + a LangGraph dev backend hitting
gpt-4o-mini. The same prompt that previously triggered 33 smooth
scrolls now triggers 0 scrollTo calls and 1 scrollTop write —
exactly the silent, instant settle we want.
Bumps @ngaf/chat to 0.0.8.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Real-LLM streaming exposed visible jerky scroll behavior. Profiled it: the auto-scroll-to-bottom effect was firing 37 `scrollTo()` calls in 2.87s during a single ~150-token response. 33 of those used `behavior: 'smooth'`, producing overlapping smooth-scroll animations that interrupt each other every ~80ms and never settle.
Fix
Drop `requestAnimationFrame(() => scrollTo({ behavior }))`, use direct `scrollTop = scrollHeight`. Instant, idempotent, no animation queue.
```diff
```
Same logic for the parked-reading case (user scrolled up >150px → no auto-scroll). Same logic for the new-message case (always pin to bottom). Just no animation overhead.
Verification
Profiled the same prompt before/after against a LangGraph dev backend running OpenAI gpt-4o-mini:
User-visible result: streaming text settles in place without animation jitter.
Test plan
🤖 Generated with Claude Code