Mobile reading-page scroll edges

Request and evidence

Follow-up to the mobile motion release (bb7598686). The supplied iPhone screenshots show a solid status strip, a rectangular header surface, a faint bottom band, and dark space below a focused Community reply. The user explicitly chose to keep search and account controls visible while scrolling.

Code inspection found a fixed wallpaper that can stop at Safari's browser viewport and two simultaneous bottom safe-area reservations (shell and main). The previous header blurred a separate uniformly tinted pseudo-element. These are client paint/layout issues; there is no evidence here of a CDN fault.

Changes

• Keep the mobile Community/Discover toolbar sticky. Blur its own surface and dissolve its lower edge into the content; replace the uniform rectangular backing. Preserve control hit targets and body-portalled menus.
• Dim the blurred backdrop for contrast over white Community cards; give the search field a thin dark fill, readable placeholder, and subtle highlights. Brighten the neutral free-plan balance within this mobile toolbar.
• Paint the actual document background and make its wrappers transparent. Use repeating tiles with softly matching ends, sized independently of feed length. Preserve wallpaper preferences, including portrait custom images. Loading an old image after leaving a route cannot change the new route.
• Remove duplicate shell safe-area padding. While an editor is focused, remove the remaining bottom inset and suppress elastic document overscroll.
• Keep native keyboard/scroll handling from the preceding release. This adds no viewport resize listeners, delayed scroll corrections, or animated shell dimensions. Other contained pages retain their wallpaper renderer.
• Respect reduced transparency with a solid fading surface and no blur; use the same readable surface on older browsers where blur is disabled/absent.

Primary references

• Apple: Meet Liquid Glass, scroll edge effects describes dissolving content below floating navigation, preserving legibility, and avoiding stacked glass surfaces. This is design guidance, not a web API.
• Apple HIG: Scroll views recommends soft scroll edges for the gradual transition into floating controls.
• WebKit issue 301756, engineer explanation explains Safari's solid color extension around fixed/sticky edge elements.
• WebKit LocalFrameView source treats backdrop-filtered edge candidates as multicolor. Applying the filter to the bar follows that heuristic; actual OS rendering remains device-dependent.
• WebKit issue 217754 documents retained bottom safe-area spacing while the keyboard is visible.
• WebKit issue 292603 reports extra root scroll range with the iOS keyboard, even in constrained layouts.
• WebKit issue 234779 documents iOS fixed-background limitations. The canvas uses scroll attachment.
• CSS Backgrounds: root canvas explains why root cover sizing follows the document box. Explicit tile dimensions prevent recropping when an infinite feed grows.
• Chrome: Android edge-to-edge migration describes the modern browser/gesture-navigation surface and safe-area placement.

Verification

• pnpm build: pass (5/5 tasks).
• pnpm typecheck: pass (8/8 tasks).
• Canvas, viewport, page scrolling, and history restoration tests: 34/34 pass. New tests first failed against the missing canvas support and document-sized background, then passed after implementation.
• Full app suite: 738 tests, 735 pass; the same three existing drawer geometry failures documented in the previous release. No new failures.
• Local Vite HTTP checks: Community, Discover, canvas helper, AppShell, and global stylesheet all return 200. Development server stopped after checking.
• Independent review identified root wallpaper resizing with feed growth; corrected with stable tiles and reviewed again without blocking findings.

No local browser was opened, per AGENTS.md. iPhone keyboard scrolling and final Safari status/address-bar glass still require physical-device observation. The webpage cannot force native Liquid Glass appearance across OS versions/settings.

Rollout

Push this change to main using the existing Railway auto-deployment. Verify Railway status, /health, both reading-page URLs, and deployed JS/CSS containing the new reading-canvas variables and header styles. No schema or service changes.