From cb4cb77e28bcac21eae86a48cb62e92b236e6915 Mon Sep 17 00:00:00 2001 From: Leon van Zantvoort Date: Mon, 6 Jul 2026 18:42:02 +0200 Subject: [PATCH] fix(website): paint landing code editor scroller on iOS The landing page code editor (#code) and Show-SQL panel (#sqlpanel) use overflow-x:auto, but were transparent and relied on their parent's background showing through. On iOS Safari an overflow-x:auto element gets its own compositing layer; a transparent one paints the scrolled-in (off-screen) region black instead of the ancestor background, so code scrolled into view was unreadable. Give each horizontal scroller its own opaque background matching its container (--panel for #code, --statusbg for #sqlpanel). Both are id selectors, so they override .storm-home pre{background:transparent} by specificity; desktop appearance is unchanged. --- website/src/pages/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/website/src/pages/index.js b/website/src/pages/index.js index a053bd7db..91dda2033 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -75,7 +75,11 @@ const CSS = ` .storm-home .sqlbtn .ico{width:13px;height:13px;opacity:.9} .storm-home .sqlconsole{display:none;border-top:1px solid var(--border-soft);background:var(--statusbg)} .storm-home .editor.show-sql .sqlconsole{display:block} - .storm-home #sqlpanel{margin:0;padding:14px 18px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.75;white-space:pre;overflow-x:auto;color:var(--plain)} + /* Solid background required on the horizontal scroller: on iOS Safari an + overflow-x:auto element gets its own compositing layer, and a transparent + one paints the scrolled-in region black instead of showing the ancestor + background. Match .sqlconsole so it's visually identical. */ + .storm-home #sqlpanel{margin:0;padding:14px 18px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.75;white-space:pre;overflow-x:auto;color:var(--plain);background:var(--statusbg)} .storm-home .statusbar .sqllabel{display:none;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .storm-home .statusbar .sqllabel .ar{color:var(--accent)} .storm-home .editor.show-sql .statusbar #status, @@ -89,7 +93,10 @@ const CSS = ` .storm-home .gutter{padding:22px 0;width:48px;text-align:right;color:#3b3b46;font-family:var(--mono);font-size:13px; line-height:26px;user-select:none;border-right:1px solid var(--border-soft);flex:none} .storm-home .gutter div{padding-right:15px} - .storm-home #code{margin:0;padding:22px 24px;font-family:var(--mono);font-size:14px;line-height:26px;white-space:pre;overflow-x:auto;flex:1} + /* Opaque background (see #sqlpanel note): the horizontal scroller must paint + its own background or iOS renders the off-screen columns black. --panel is + the codearea gradient's top stop, so the seam is imperceptible. */ + .storm-home #code{margin:0;padding:22px 24px;font-family:var(--mono);font-size:14px;line-height:26px;white-space:pre;overflow-x:auto;flex:1;background:var(--panel)} /* Docusaurus styles bare 
 with a light code-block background (and rounded box) in
      light color mode; neutralize it so the landing editor keeps its dark chrome regardless
      of the active Docusaurus theme. */