Fix real horizontal overflow from the chaos-tier-3 broadcast tilt

f961c6774fa7d4fbf8b3e9b084a6d4b7f011e653 · 2026-09-23 19:44:48 -0700 · Steve Abrams

Independently verified the Chaos Index build (0e2f7d8) against its own
"no overflow at 390/768/1024/1440" claim by driving chaos to tier-3 and
checking document.documentElement.scrollWidth directly -- it failed at
390/768/1024 in Chrome and at 1024 in WebKit. Root-caused via CSSOM rule
bisection (disabling each chaos-tier-3 rule one at a time): the 0.6deg
TV-bezel tilt on main#channelContainer -- a very tall element -- widens its
own visual bounding box (w*cos(theta) + h*sin(theta) > w), and with
overflow-x unset on html/body that extra width leaked into a real,
scrollable horizontal overflow at every breakpoint except 1440.

Fix: overflow-x:hidden on both html and body (body alone was insufficient --
verified empirically that with html's overflow left at its default, the UA
propagates body's overflow to the viewport scroller and
document.documentElement.scrollWidth can still report the wider, unclipped
value; setting it on html too stops the propagation and actually clips it).
Re-verified clean at all 4 widths in Chrome + WebKit, reduced-motion never
applies the tilt (transform:none, 0 overflow), sticky header still sticks,
klaxon/category-chip/article-link remain clickable at max tier. All prior
regressions (hash freeze, arcs, frame grammar, attribute escaping, grid
race, WebKit header) still pass.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011iuURMrsPBwAqMc5LgvFLH

Files touched

M index.html

Diff

commit f961c6774fa7d4fbf8b3e9b084a6d4b7f011e653
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Sep 23 19:44:48 2026 -0700

    Fix real horizontal overflow from the chaos-tier-3 broadcast tilt
    
    Independently verified the Chaos Index build (0e2f7d8) against its own
    "no overflow at 390/768/1024/1440" claim by driving chaos to tier-3 and
    checking document.documentElement.scrollWidth directly -- it failed at
    390/768/1024 in Chrome and at 1024 in WebKit. Root-caused via CSSOM rule
    bisection (disabling each chaos-tier-3 rule one at a time): the 0.6deg
    TV-bezel tilt on main#channelContainer -- a very tall element -- widens its
    own visual bounding box (w*cos(theta) + h*sin(theta) > w), and with
    overflow-x unset on html/body that extra width leaked into a real,
    scrollable horizontal overflow at every breakpoint except 1440.
    
    Fix: overflow-x:hidden on both html and body (body alone was insufficient --
    verified empirically that with html's overflow left at its default, the UA
    propagates body's overflow to the viewport scroller and
    document.documentElement.scrollWidth can still report the wider, unclipped
    value; setting it on html too stops the propagation and actually clips it).
    Re-verified clean at all 4 widths in Chrome + WebKit, reduced-motion never
    applies the tilt (transform:none, 0 overflow), sticky header still sticks,
    klaxon/category-chip/article-link remain clickable at max tier. All prior
    regressions (hash freeze, arcs, frame grammar, attribute escaping, grid
    race, WebKit header) still pass.
    
    Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_011iuURMrsPBwAqMc5LgvFLH
---
 index.html | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/index.html b/index.html
index 453bae5..7d94990 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,12 @@
 /* ---------- 1. Reset & base ---------- */
 *, *::before, *::after { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; }
+/* overflow-x on body alone is not enough: with html's overflow unset, the
+   UA propagates body's overflow to the viewport's scroller, but
+   document.documentElement.scrollWidth can still report the wider,
+   unclipped value (verified empirically). Setting it on html too stops the
+   propagation and clips scrollWidth for real, everywhere. */
+html { overflow-x: hidden; }
 /* The [hidden] attribute must always win over any class-based `display`
    rule below (several elements here are toggled via `.hidden = true/false`
    in JS while also carrying a class that sets display:flex/grid). Without
@@ -34,6 +40,14 @@ body {
   line-height: 1.4;
   /* reserve room for the fixed chyron ticker so it never overlaps content */
   padding-bottom: 3rem;
+  /* Safety net: the chaos-tier-3 TV-bezel tilt rotates a very tall element
+     (main#channelContainer), and rotating a tall box even a fraction of a
+     degree widens its visual bounding box (width*cos + height*sin) beyond
+     the viewport — confirmed via CSSOM bisection to be the sole cause of a
+     real horizontal scrollbar at 390-1024px at max chaos. overflow-x:hidden
+     here clips that leak (vertical/position:sticky is untouched) without
+     changing the tilt's visible effect or any layout. */
+  overflow-x: hidden;
 }
 h1, h2, h3, p { margin: 0; }
 button { font-family: inherit; }

← 0e2f7d8 Add CHAOS INDEX: a global escalation gauge that degrades the · back to Crazy News Channel · Chaos Index: serialize live announcements, reserve 100% for 679e2f4 →