Skip to content

fix(website): rewind landing editor scroll when a scene renders#189

Merged
zantvoort merged 1 commit into
mainfrom
fix/landing-editor-scroll-rewind
Jul 6, 2026
Merged

fix(website): rewind landing editor scroll when a scene renders#189
zantvoort merged 1 commit into
mainfrom
fix/landing-editor-scroll-rewind

Conversation

@zantvoort

Copy link
Copy Markdown
Collaborator

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 #code scrolled right. On desktop the next scene self-heals: the typewriter's 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. Nothing in the page ever reset the scroll position.

Fix: reset scrollLeft explicitly at the three points where scroller content is replaced:

  • when a scene starts typing (covers auto-advance, tab clicks, and the reduced-motion path),
  • when the finished snippet is rendered, so a mid-typing pan can't leave the resting scene shifted through its dwell,
  • when the Show-SQL panel 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).

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 zantvoort merged commit 487c8ab into main Jul 6, 2026
7 checks passed
@zantvoort zantvoort deleted the fix/landing-editor-scroll-rewind branch July 6, 2026 17:21
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.
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