Mobile reading, keyboard motion, and browser chrome

Evidence and cause

The supplied 4.93-second iPhone recording shows repeated keyboard opening and closing in a Community thread. Frames sampled at 5 fps show the page moving down with a dark strip above it, then snapping back. The previous fixed-shell repair follows both visualViewport.height and offsetTop, while also revealing the field inside a nested scrollport. That competes with WebKit's native focus pan. This is a client layout/compositing path, not evidence of a CDN cache fault.

The Safari comparison shows Yumina's solid bottom browser area versus Reddit's content beneath the native translucent controls. A viewport-sized fixed page prevents natural document scrolling and can qualify for WebKit's fixed-edge color extension.

Changes

• On phones, Community and Discover use native document flow and scrolling. Their keyboard, caret, toolbar, and resume motion no longer triggers shell height/offset correction or outer-scroll resets. Chat and studio keep their existing contained viewport behavior.
• Wallpaper has a stable 100lvh canvas, with a negative stacking layer inside an isolated shell. This preserves its paint above the shell background while avoiding classification as foreground fixed chrome. No transform is added to ancestors of fixed dialogs.
• The sticky top bar has a separate blurred paint layer. Opening a story preview keeps its place in the document instead of shifting the feed. The back-to-top control has a compact fixed box, safe-area clearance, and no invisible tab stop.
• History snapshots retain named page positions across nested/document modes; old snapshots and delayed content still restore. Breakpoint changes transfer position before switching CSS ownership. Community's duplicate page-global scroll restore was removed.
• Discover filter/search/back-to-top and Community pagination target the active scroll owner and respect reduced motion. Mobile onboarding uses document flow. Drawer, Radix overlays, and notification sheets preserve document scroll locks.

Primary references checked

• WebKit: Designing Websites for iPhone X — edge-to-edge viewport and safe-area placement of controls.
• Chrome: Edge-to-edge — modern Android browser chrome and safe-area behavior; position floating controls with the inset rather than animating their padding.
• WebKit features for Safari 26.4 — current engine improvements, including scrolling behavior.
• WebKit engineer clarification, issue 301756, comment 2 — solid toolbar color extension is associated with viewport-constrained edge elements. Safari, not site CSS, owns the native Liquid Glass appearance.
• WebKit LocalFrameView source — fixedContainerEdges / containerEdgeCandidateResult exclude negative viewport-sized decorative layers and oversized layers from edge candidates. This supports the layer structure; it is not a physical-device visual test.

Validation

• pnpm build: pass, all five build tasks.
• pnpm typecheck: pass, all eight tasks.
• Focused viewport, page-scroll, restoration, overlay recovery, Back audit, and story-return suite: 49/49 pass.
• Full app suite: 735 tests, 732 pass, three pre-existing failures in mobile-nav-drawer-layout.test.ts (row height, close-control size, and row gap). No new failures; these same failures were established on the base commit.
• Local Vite server: Community, Discover, changed TypeScript modules, and global CSS return HTTP 200. This checks development serving, not browser rendering.
• Independent review: rotation transfer issue fixed; final layout, negative wallpaper stacking, compact floating control, and restoration accepted.

No local browser was opened, in accordance with AGENTS.md. Real iPhone keyboard animation, Safari's final toolbar compositing, and Android gesture-navigation appearance still need physical-device observation. Desktop/JSDOM tests cannot substitute for those native browser surfaces; exact Reddit-style rendering is not claimed for every browser version or OS setting.

Deployment verification

Push to main triggers the existing Railway deployment. After rollout, verify the deployment status, /health, both reading-page URLs, and that served JS/CSS contain data-mobile-page-scroll. No database or infrastructure changes.