From c6c7eb0c01018a086cdc0d9dd6fb9e12e183c976 Mon Sep 17 00:00:00 2001
From: Leon van Zantvoort <zantvoort@beatgridmedia.com>
Date: Mon, 6 Jul 2026 19:12:09 +0200
Subject: [PATCH] fix(website): rewind landing editor scroll when a scene
 renders

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.
---
 website/src/pages/index.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 91dda2033..640c55f7e 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -420,7 +420,7 @@ export default function Home() {
     const editorEl=document.querySelector('.storm-home .editor'), sqlBtn=document.getElementById('sqlbtn'),
           sqlBtnText=document.getElementById('sqlbtntext'), sqlPanel=document.getElementById('sqlpanel');
     let showSql=false, curIdx=0;
-    function renderSql(){ sqlPanel.innerHTML=SQL[curIdx]||'<span class="sqlc">-- no query</span>'; }
+    function renderSql(){ sqlPanel.innerHTML=SQL[curIdx]||'<span class="sqlc">-- no query</span>'; sqlPanel.scrollLeft=0; }
     function onSqlClick(){
       showSql=!showSql;
       editorEl.classList.toggle('show-sql',showSql);
@@ -504,6 +504,13 @@ export default function Home() {
 
       const text=fullText(sc.code);
       setGutter(text);
+      // Rewind the horizontal scroller before typing. Desktop resets it for
+      // free (the near-empty first render collapses scrollWidth, clamping
+      // scrollLeft to 0), but iOS Safari keeps the stale offset when content
+      // shrinks — so one touch pan (even an accidental diagonal swipe while
+      // scrolling the page) would leave every later scene with the start of
+      // each line cut off.
+      codeEl.scrollLeft=0;
 
       if(reduce){
         codeEl.innerHTML=render(sc.code,text.length,false);
@@ -524,6 +531,7 @@ export default function Home() {
       }
       if(myGen!==gen) return;
       codeEl.innerHTML=render(sc.code,text.length,false);
+      codeEl.scrollLeft=0; // settle the finished snippet at its line starts
       await wait(fast?160:360);
       if(myGen!==gen) return;
       statusTextEl.textContent=sc.caption;statusEl.classList.add('show');