fix(website): rewind landing editor scroll when a scene renders#189
Merged
Conversation
Follow-up to #188, which gave the horizontal scrollers opaque backgrounds but did not fix the symptom on iOS: scenes rendering with the first ~13 characters of every line cut off. The actual cause is a retained scroll offset, not paint. Any touch pan on the code block (including an accidental diagonal swipe while scrolling the page) leaves #code scrolled right. Desktop self-heals on the next scene: the near-empty first render collapses scrollWidth and the browser clamps scrollLeft back to 0. iOS Safari does not clamp the offset of a composited scroller when its content shrinks, so the stale offset survives every innerHTML replacement and each new scene types into a shifted viewport. Reset scrollLeft explicitly when a scene starts typing, when the finished snippet is rendered, and when the Show-SQL panel content is replaced.
zantvoort
added a commit
that referenced
this pull request
Jul 6, 2026
…#190) * fix(website): wrap landing editor code on phones instead of scrolling Third pass at the iOS landing editor bug, replacing the mechanism instead of nudging it. #188 (opaque scroller backgrounds) and #189 (explicit scrollLeft resets) are both live and neither cured it: on an iPhone the typed code still renders shifted left by a uniform number of characters, and panning repaints only part of the content. iOS Safari desyncs the painted tiles of a composited overflow-x scroller whose DOM is replaced every frame by the typewriter, so no scroll-position or background fix can reach it. Below 760px the editor now wraps long lines (pre-wrap) instead of scrolling them, with a slightly smaller font to limit wrapping. With no horizontal scroller there is no composited scroll layer to go stale. The gutter is hidden there too: line numbers cannot align once a logical line spans several visual rows. The Show-SQL panel gets the same treatment. Desktop and tablet widths are unchanged. * docs(blog): quote the closing line as the why-we-built-storm abstract Replace the dek with the post's own closing line, set as a quote.
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.
Follow-up to #188, which gave the landing editor's horizontal scrollers opaque backgrounds but did not fix the reported symptom on iOS: scenes rendering with the first ~13 characters of every line cut off (screenshot in the report showed a uniform 13-character offset on all 15 lines, with the 24px left padding gone too).
Actual cause: a retained scroll offset, not paint. Any touch pan on the code block — including an accidental diagonal swipe while scrolling the page, which is near-unavoidable on a phone — leaves
#codescrolled right. On desktop the next scene self-heals: the typewriter's near-empty first render collapsesscrollWidth, and the browser clampsscrollLeftback to 0. iOS Safari does not clamp the offset of a composited scroller when its content shrinks, so the stale offset survives everyinnerHTMLreplacement and each new scene types into a shifted viewport. Nothing in the page ever reset the scroll position.Fix: reset
scrollLeftexplicitly at the three points where scroller content is replaced:Deliberate panning during a scene's dwell is untouched — the reset only happens when content changes.
The #188 background rules are kept; they're harmless and guard the compositing-paint case independently.
Verified with
npm run build(only pre-existing broken-anchor warnings in old snapshots).