fix(website): wrap landing editor code on phones instead of scrolling#190
Merged
Conversation
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.
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
1 participant
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.
Third pass at the iOS landing editor bug — this one replaces the mechanism instead of nudging it.
Why #188 and #189 didn't cure it. Both are confirmed live (verified the deployed homepage chunk
c4f5d8e4.7af32268.jscontains the threescrollLeft=0resets, and the served CSS has the opaque scroller backgrounds). Yet on an iPhone the typed code still renders shifted left by a uniform number of characters (exactly 23 in the latest report, 13 earlier), and panning repaints only part of the content — only the first line tracks the finger. That is iOS Safari desyncing the painted tiles of a compositedoverflow-x:autolayer whose DOM is replaced every frame by the typewriter. The painted content sits at a stale offset regardless of the actual scroll position, so no scroll-value or background fix can reach it.Fix: no scroller, no bug. Below 760px (the existing mobile breakpoint) the editor wraps long lines (
pre-wrap) instead of scrolling them, at a slightly smaller font (12.5px) to limit wrapping. With no horizontal overflow there is no composited scroll layer to go stale, so the failure is structurally impossible rather than patched around. The gutter is hidden at that width — 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; the #188/#189 changes stay as belt-and-braces for mid-size touch screens that still scroll.Verified with a 390px-wide headless render: scenes type and wrap cleanly with no cut-off line starts.
Also in this PR (as requested): the why-we-built-storm blog abstract is now the post's own closing line, set as a quote — “We set out to build the model we would enjoy programming against.”
Verified with
npm run build(only pre-existing broken-anchor warnings in old snapshots).