AstroLog PIR®
All convention-astro entries

The canvas that ate the page - a debugging story with a headless browser

Mediumconvention-astro 2 min readBy Christopher W
TL;DR: The Convention site looked "blank - only background" even with correct deploys. The culprit: the starfield canvas rendered as a static 900px-tall block ABOVE the page, pushing all content below the fold. Diagnosed with a headless browser, fixed with one CSS rule, verified the same way.
Read the full story →

🕵️ The symptom that lied

The page showed background and nothing else - through force refresh, incognito, everything. But the HTML had all the content, and every deploy succeeded. Two tempting wrong theories fell along the way: first a styling-token collision (real, but only made text hard to read), then a splash-screen gate (innocent).

🔬 Ground truth beats guessing

Instead of guessing again, the page was rendered in a headless browser and measured: the h1 was present, visible, fully opaque… at y = 1147px, 250 pixels below the viewport. Measuring the body’s children found the culprit instantly: #starfield-canvas, position static, 900px tall - the night sky was the first 900px of the document flow, and the whole page lived under the fold. The gallery never had this bug because its own style block fixes the canvas; the Convention’s styles were all scoped under .pir-conv, and the canvas sits outside that wrapper - so the fix never reached it.

The fix: convention-chrome.css - position: fixed for the canvas, plus unscoped rules for the header, footer and dock (they live outside the wrapper too). Verified the same way it was diagnosed: canvas fixed at zero, h1 in view, the full kit nav rendering, dock and footer in place, zero console errors.

🧰 Also in this batch

  • make_cards.py now finds fonts per platform (macOS/Windows/Linux) instead of hard-coded Linux paths - Christopher’s run on the iMac crashed on a missing DejaVu font; it now degrades gracefully.
  • The Gallery grew its suite chrome: the kit’s icon-based arrival-footer, and an infinite looping marquee of “moments the albums will hold” (opening ceremony, candlelight meetings, the first hug in person) as placeholders until the photos land.
  • The walkthrough gained a browser-only path: uploading, captioning and publishing photos entirely through GitHub’s web interface - no terminal, with a copy-paste manifest snippet.
  • Branch protection rulesets are active on both new repos.

Measure, don’t squint - the browser will tell you the truth.