diff --git a/hero.js b/hero.js index 45b10ca..c231a18 100644 --- a/hero.js +++ b/hero.js @@ -28,10 +28,13 @@ const COUNT = 47; const BLEED = `${((OVERSCAN - 1) / 2) * -100}%`; const STYLE_TEXT = ` -/* The field bleeds 25% past the hero piece on every side; clip the - document sideways (clip, not hidden: no scroll container) so the - bleed can never cause horizontal scrolling. */ -html { overflow-x: clip; } +/* The field bleeds 25% past the hero piece on every side. Sideways + it is clipped at the header box (clip, not hidden: no scroll + container, and overflow-y stays visible) - an element wider than + the viewport, even unscrollable, makes phones re-size the layout + viewport when it appears, which read as the page jumping as the + input loaded. Vertically it may run into the copy below. */ +.hero-module { overflow-x: clip; overflow-y: visible; } .redoal-paths { position: absolute; inset: ${BLEED};