SDC Focus Android render gap — fixed
Section titled “SDC Focus Android render gap — fixed”Symptom: blank line after “Through” on the SDC Mission paragraph, only on Talbot’s Android phone in portrait (screenshot: SDC-Mission_Android.jpg). Not visible on desktop or in DevTools/Playwright mobile emulation.
Root cause: .ft (Glossary tooltip trigger span, sites/sdc/src/pages/focus.astro + sites/mbr/src/pages/focus.astro) was position: relative; display: inline; with an absolutely-positioned .ft-tip child holding the hidden tooltip text. Real Android browsers mis-compute the line box for this and reserve blank line-box space for the hidden abs-positioned child at the wrap point. Desktop Chromium and Playwright’s devices['Pixel 5'] (same Blink engine, viewport/UA emulation only) never reproduced it — confirmed by side-by-side rebuild + screenshot before and after.
Fix: display: inline-block on .ft — makes the trigger an atomic inline box, eliminating the mis-reservation. Applied to both sdc and mbr (identical shared pattern). Verified: rebuild, screenshot diff (desktop + Pixel 5 emulation, no regression), tooltip hover-test (still opens/positions correctly). Talbot deployed live and confirmed fixed on his phone.
Commits: monorepo 1362e8b (fix), 330ef67 (LESSONS.md), be6f7fc (CHANGELOG).
Android testing process established (no Android emulator available in this environment):
- Desktop DevTools / Playwright mobile emulation — fast, catches viewport/layout bugs, not engine-specific rendering bugs.
- Real-device check (Talbot’s phone, or
pnpm run preview --host+ LAN IP) — the only reliable check for engine-level CSS bugs; required before shipping anything touching tooltip/CSS-positioning on the focus pages. - BrowserStack/remote device lab — not set up; only worth it if this class of bug recurs.
Promoted to Core/AI/AI-Testing-Standards.md (Playwright-emulation-limits note) and monorepo/LESSONS.md (the .ft bug writeup).