Skip to content

fix(mobile): root cause of WebKit page-top slices (main#content inline-block)

Scaffold Digital Fleet requested to merge fix/main-content-inline-root into risefor_main/master

Follow-up to !65 (merged) — the header-logo-half-cut residue, real root this time

Symptom (iPhone 14, after !65 (merged) deployed): header now starts at the very bottom of the Risefor logo — logo sliced in half. Overlay of content is gone; the artifact moved up one element.

Why !65 (merged) was a symptom fix: it forced solid-risefor-header itself to block (correct and still needed), but the container stayed in the inline world:

<div class="notLoggedIn" style="…; white-space: nowrap">        <!-- orbit shell, inline style -->
  <main id="content" class="segment three-quarter sm-full …">   <!-- .segment = display:inline-block (orbit-styling-framework) -->
    <solid-risefor-header>…</solid-risefor-header>              <!-- block after !65 ✓ -->

main#content is a page-tall (~44 000px measured) inline-block participating in a text line box. Blink's line-box math tolerates that; WebKit does not — it mis-sizes the giant inline box, and whatever block content comes first gets sliced/shifted at the top. Before !65 (merged): header overlaid the page. After !65 (merged): the first block inside (the logo) got the strut/line-box treatment instead — half-cut logo, header bar starting at its bottom edge.

Fix (13 lines, CSS-only, still zero orbit-CSS changes):

  • main#content { display: block } — removes the inline formatting context entirely
  • .notLoggedIn { white-space: normal } — neutralizes the nowrap shell that feeds the same line-box math

Both rules live in our index.scss RESET-ORBIT section, matching the existing pattern (orbit's own header/left-nav CSS is deliberately disabled in this integration — we re-style from risefor-front).

Verification

  • Vite-served CSS confirmed live: main#content{display:block;flex:1;width:100%}.
  • Blink (desktop emulation) renders identically before/after — expected, since Blink tolerated the old layout. Real-device check is the actual test.

iPhone checklist (after merge + prod pull)

  1. Risefor logo fully visible, header bar starting below it (not at its middle).
  2. Regression check on !65 (merged) wins: listing titles clear, back buttons visible.
  3. Rep listing mobile card: avatar beside content (unchanged).
  4. Desktop: zero visual change.

Merge request reports