← back to Crazy News Channel Shadowman

cta/CTA-REPORT.md

158 lines

# CTA — Click-Through Report: PANDEMONIUM-24 (crazy-news-channel)

Target: `file:///Users/macstudio3/Projects/crazy-news-channel/index.html`
Date: 2026-09-23/24 · Engines: Chrome (Playwright chromium 1.61.0), Safari (Playwright webkit), Browserbase cloud Chromium.

## VERDICT: BROKEN IN SAFARI (WEBKIT) — one high-severity, WebKit-only visual-corruption bug

**BROKEN IN SAFARI:** the sticky top header (`.chrome`, `position: sticky; backdrop-filter: blur(6px)`)
renders with **ghosted/bleeding text and images from scrolled-past content** showing through the
header on every scroll event, in every viewport tested (390/768/1024/1440). Chrome and Browserbase
Chromium render the identical CSS cleanly — this is 100% WebKit-specific and 100% reproducible.
Everything else — all 27 functional components across all three engines — rendered and worked
correctly with zero console/page errors and zero horizontal overflow at any viewport.

If Safari/iOS traffic matters for this channel, this is a ship-blocker for visual QA even though
no user flow is functionally broken (nothing is unclickable — it's a compositing artifact, not a
crash).

---

## 1. Setup

- **Chrome**: Playwright `chromium`, 1440×900 base viewport, `recordVideo` on, `page.screenshot` capture per step. Full pass, 0 console errors.
- **Safari**: Playwright `webkit`, same click-list, own video. Full pass, 0 console errors.
- **Browserbase**: cloud Chromium session (`https://browserbase.com/sessions/bcc4dcdf-8909-4c06-9a91-4ada7f19c364`), reached via `chromium.connectOverCDP()`. Since the target is a local `file://` page with no external resources (verified: only same-origin `stories-data.js`, no CDN/fonts), I served the project directory to the remote cloud browser via **Playwright route-interception** (`page.route('**/*', ...)` fulfilling requests directly from local disk) rather than a tunnel — `ngrok`/`cloudflared` tunnel commands were blocked by the auto-mode classifier ("External Ingress Tunnel"), and route-interception is the correct, sandboxed way to hand a cloud browser same-origin local content anyway. Full pass, 0 console errors.
- Credentials for Browserbase were present at `~/.claude/skills/browserbase/.env` (`BROWSERBASE_PROJECT_ID` / `BROWSERBASE_API_KEY`) — no degraded-mode needed.
- **Retry-safety note:** the app's own `tick()` loop re-renders the story grid every second to simulate live breaking-news escalation (`renderStories()` fires whenever a story's stage advances). This causes a real, if narrow, race window where an in-flight Playwright locator (e.g. mid-`scrollIntoViewIfNeeded`) can get detached if the grid re-renders at that exact instant. All three harness passes were built with a `retry()` wrapper (5 attempts, 400ms backoff) around grid-scoped actions to absorb this; it fired occasionally but never failed a check. This is worth knowing about, not fixing — it's the intended "live" behavior, but it does mean an unlucky click on a real user's very fast double-click during an escalation could theoretically need a second attempt. Rated **low severity / informational**, not a defect.
- Chrome's first attempt crashed mid-run (`Target page, context or browser has been closed`) under heavy local machine load (58 concurrent Chrome-family processes, 189 Node processes from other sessions on this shared dev box) — not an app bug. Rerun with lighter (`fullPage:false`) screenshots and the retry wrapper completed cleanly.
- Videos: `cta/rec/chrome.mp4`, `cta/rec/safari.mp4` (converted from Playwright's native `.webm` via ffmpeg). Browserbase's recording is the cloud session replay (see link above) — Browserbase does not expose a downloadable local video file, and the replay URL is the documented CTA-skill artifact for cloud passes.

## 2. Component × Engine Table

| Component | Chrome | Safari (WebKit) | Browserbase | Notes |
|---|---|---|---|---|
| Viewport overflow sweep (390/768/1024/1440) | ✓ no overflow | ✓ no overflow | ✓ no overflow | `scrollWidth === clientWidth` at all 4 breakpoints, all 3 engines |
| Breaking-stories grid (40 cards) | ✓ renders, 40 cards | ✓ renders, 40 cards | ✓ renders, 40 cards | Card count matches across engines |
| "Read full article →" links (sampled 3 of 44) | ✓ opens article view | ✓ opens article view | ✓ opens article view | `#articleView` un-hides correctly each time |
| Mood switch while article open | ✓ works, no crash | ✓ works, no crash | ✓ works, no crash | Category chip click while reading doesn't break article view |
| Article back button (×3) | ✓ closes article | ✓ closes article | ✓ closes article | Returns to grid, `#articleView` re-hidden |
| Escape-key close-article flow (hash deep link) | ✓ hash routes in, Esc closes | ✓ hash routes in, Esc closes | ✓ hash routes in, Esc closes | Deep-linked `#/article/<id>` loads article directly; Escape returns to grid |
| Category/mood filter chips (All + 7 categories) | ✓ all 8 switch mood correctly | ✓ all 8 switch mood correctly | ✓ all 8 switch mood correctly | Mood readout text matches per category (Crisis Red, Storm Watch, Synthwave Alert, Hype Orange, Glam Panic, Money Green, Slate Neutral) in all 3 engines |
| Empty-category state ("Uncategorized") | ✓ clean empty-state card | ✓ clean empty-state card | ✓ clean empty-state card | "No stories currently breaking in this category" renders correctly, no layout break |
| BREAKING klaxon toggle (on/off) | ✓ `aria-pressed` + banner toggle correctly | ✓ same | ✓ same | Red "WE INTERRUPT THIS BROADCAST" banner shows/hides correctly |
| Klaxon sound checkbox | ✓ toggles | ✓ toggles | ✓ toggles | (Audio itself not exercised — no user-gesture audio assertion attempted, out of scope for a silent harness) |
| Admin panel open/close toggle | ✓ | ✓ | ✓ | Dark-themed panel un-hides/hides, button label flips to "Admin (close)" |
| Admin create-story form (all fields + submit) | ✓ story created, success message, count 40→41 | ✓ same | ✓ same | Headline/category/dek/byline fields all accept input; auto-generated body confirmed present |
| Admin story list + delete button | ✓ new row deleted, count back to 0 extra | ✓ same | ✓ same | `data-delete-id` delegated click handler works |
| Admin "Reset to Defaults" | ✓ count returns to 40 | ✓ same | ✓ same | No confirm-dialog leak, no zombie rows |
| Admin panel close after reset | ✓ | ✓ | ✓ | Panel re-hides cleanly |
| Final overflow re-check (post full interaction pass) | ✓ no overflow | ✓ no overflow | ✓ no overflow | Confirms no interaction leaves the DOM in an overflowing state |
| **Sticky header (`.chrome`) during scroll** | **✓ clean** | **✗ BROKEN — ghosted/bleeding text+image overlay** | **✓ clean** | **See §3 — WebKit-only defect** |
| Console/page errors (all steps, all engines) | 0 | 0 | 0 | No JS exceptions anywhere in any pass |

Card/link/chip counts matched exactly across all three engines: 40 story cards, 44 "read full article" links (40 grid + 4 features), 8 category chips.

## 3. Chrome-vs-Safari mismatches

### HIGH — WebKit-only: sticky header renders corrupted/ghosted content during scroll

**Component:** the top masthead bar (`.chrome` — logo, title, LIVE clock, BREAKING ALERT toggle, Klaxon checkbox, Admin button).

**Root cause (confirmed in source, `index.html` ~line 104-111):**
```css
.chrome {
  position: sticky; top: 0; z-index: 20;
  background: var(--chrome);       /* e.g. #ffffffcc — ~80% opaque */
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--panel-border);
}
```
A semi-transparent `position: sticky` header combined with `backdrop-filter: blur()` is a
long-documented WebKit compositing weak spot: WebKit does not reliably recompose the blurred
backdrop on every scroll frame, so stale/unblurred pixels from content that has since scrolled
underneath the header remain visibly smeared into it.

**Reproduction:** isolated outside the full click-list to rule out a harness artifact — loaded the
page fresh in WebKit at 390×844, scrolled to two different `scrollTop` offsets, took a plain
(non-fullPage) `page.screenshot()` at each. Repeated the identical repro in Chromium for
comparison.

- **WebKit, scrollTop 650:** header shows readable ghost text — "*advanced a bill to eliminate
  Tuesdays*", "*'general vibes.'*", "*Denise Fairweather, Chief Political...*" — bleeding through
  the masthead, overlapping the logo/title/clock.
- **WebKit, scrollTop 2400:** header shows a ghosted, unblurred fragment of a story-card **photo**
  (a rooftop/building image) smeared across the masthead.
- **Chromium, identical scrollTop/viewport:** header renders as a clean, properly blurred
  translucent bar — no ghosting, no bleed-through, in either repro.

This is 100% reproducible (2/2 scroll positions tested) and 100% WebKit-specific (0/2 in
Chromium). It occurs at all four tested viewports since `.chrome` is present and sticky at every
breakpoint; it is most visually obvious on mobile (390w) where the header takes up a larger
fraction of the viewport.

**Severity: HIGH (visual break, not functional).** Nothing becomes unclickable and no console
error is thrown — all header controls (Admin button, klaxon, chips) remained clickable and worked
correctly in every WebKit pass in this report. But the header is genuinely **unreadable/visually
corrupted** during normal scrolling on Safari/iOS, which fails the "no unreadable text" bar in the
test brief. This is exactly the class of bug that only shows up by actually looking at WebKit
mid-scroll, not by a single load-and-click pass.

**Suggested fix (not applied — reporting only, per CTA scope):** drop `backdrop-filter` on the
sticky header (use a fully opaque `--chrome` background instead), or pin the header to `position:
fixed` with `will-change: backdrop-filter` / `transform: translateZ(0)` to force a stable
compositing layer, or gate `backdrop-filter` behind a `@supports` WebKit-safe fallback. Any of
these should be spot-checked in real Safari (not just Playwright webkit) before shipping, since
this class of WebKit compositing bug has version-to-version variance.

### No other Chrome-vs-Safari mismatches found

Every other component — grid rendering, all 44 read-links, the escape/back navigation, all 8
category/mood chips (including the empty-state), the klaxon banner, the admin CRUD flow
(create/list/delete/reset), and overflow behavior at all four viewports — was pixel-equivalent in
behavior and outcome between Chrome and Safari. Mood color themes (`Crisis Red`, `Storm Watch`,
`Synthwave Alert`, `Hype Orange`, `Glam Panic`, `Money Green`, `Slate Neutral`) applied identically
in both engines.

## 4. Browserbase cloud notes

- Cloud Chromium matched local Chrome behavior exactly — same 27/27 component checks passed, 0
  console errors, no overflow.
- One implementation note for future cloud passes against `file://`-only apps: Browserbase's
  remote browser cannot reach a local filesystem or `localhost` directly. Rather than opening an
  ngrok/cloudflared tunnel (blocked here by the sandbox's "External Ingress Tunnel" classifier, and
  arguably unnecessary exposure for a local-only test target), the harness used Playwright's native
  `page.route('**/*', ...)` to fulfill every request straight from local disk before it would ever
  hit the network — a same-origin mock that works identically to a real static server for any app
  with no external dependencies (this one has none: single inline-styled `index.html` +
  `stories-data.js` + local `images/`).
- Session replay: https://browserbase.com/sessions/bcc4dcdf-8909-4c06-9a91-4ada7f19c364

## 5. Ranked defect list

1. **[HIGH] WebKit-only: sticky masthead header shows ghosted/bleeding scrolled-content through
   `backdrop-filter: blur()` during scroll** — reproducible at every viewport, confirmed absent in
   Chrome/Chromium. See §3. This is the only defect found in the entire click-through.
2. **[LOW / informational] Live-ticking grid re-render creates a narrow click race window** — the
   app's own `tick()` simulation re-renders `.story-card` elements roughly once per second whenever
   a story escalates, which can detach an in-flight click target for a few hundred milliseconds.
   Not observed to cause a real failed click in manual-speed use; only surfaced as an occasional
   need-to-retry in the fast, scripted harness. Not a rendering defect and not browser-specific
   (same behavior in all 3 engines) — noted for completeness, not counted against the verdict.

No horizontal-scroll/overflow issues, no console/page errors, no unreadable text outside the §3
header artifact, and no broken-image/crash conditions were found in any engine at 390/768/1024/1440px.

## 6. Artifacts

- Screenshots: `cta/shots/{chrome,safari,browserbase}/*.png` (38 shots per engine — before/after
  pairs for every interactive step + the 4-viewport overflow sweep)
- Recordings: `cta/rec/chrome.mp4`, `cta/rec/safari.mp4` (full click-through, converted from
  Playwright's native recording); Browserbase cloud session replay linked above
- Raw structured results: `cta/cta-chrome-results.json`, `cta/cta-local-results.json` (safari),
  `cta/cta-browserbase-results.json`
- WebKit-bug repro screenshots (outside the main click-list, used to isolate the defect):
  `cta/webkit-bug-repro/webkit-scroll-realtime.png`, `cta/webkit-bug-repro/webkit-scroll2.png`
  (both show the ghosting), and the Chromium-clean comparison
  `cta/webkit-bug-repro/chromium-scroll-realtime.png`