#5772·nanobot

[WebUI] Top of the viewport renders washed out in iOS PWA standalone mode

Author: morandotCreated Sep 15, 2026Updated Sep 15, 2026

Bug Description

In iOS PWA standalone mode, the top of the viewport renders washed out. The strip holding the sidebar toggle and the right-hand controls, plus the message content immediately below it, appear semi-transparent or blurred compared with the rest of the page.

Steps to Reproduce

  1. Install the WebUI to the iOS home screen (Safari: Share, then Add to Home Screen).
  2. Launch it from the home screen icon so it runs standalone with no browser chrome.
  3. Observe the top strip and the content directly beneath it.
  4. Scroll and compare the affected region against the rest of the page.

Expected Behavior

The top of the viewport should render at full contrast and match the rest of the UI surface. The status bar treatment should follow the iOS PWA conventions rather than compositing the page behind a translucent band.

Additional Context

Client: iPhone Air, iOS 27. A screenshot is available and can be attached on request. It would also help to know whether this happens in the chat view or in the drawer.

Surfaces to audit, all verified to exist in the current tree:

  • webui/index.html sets apple-mobile-web-app-status-bar-style to default and uses viewport-fit=auto. env(safe-area-inset-*) only resolves to non-zero values with viewport-fit=cover, while several components rely on env(safe-area-inset-top) and env(safe-area-inset-bottom).
  • The chat view draws a fade gradient over the top of the scrolled content: webui/src/components/thread/ThreadViewport.tsx renders pointer-events-none absolute inset-x-0 top-0 h-3 bg-gradient-to-b from-background to-transparent, and webui/src/components/thread/activity/ThinkingReasoningShell.tsx does the same inside reasoning blocks.
  • The chrome layer is bg-transparent and absolutely positioned over the content: webui/src/App.tsx, the HostChrome header (host-drag-region pointer-events-none absolute inset-x-0 top-0 z-40 h-11 bg-transparent).
  • webui/src/components/thread/ThreadComposer.tsx uses backdrop-blur-md on a surface that can sit near the viewport edge.

Possibly related: #4479 removed backdrop-blur from the sheet overlay for smoother mobile animation, which is the same family of issue.