Fix(pwa): keep the status-bar strip hit-testable for iOS's edge blur check

iOS 26+ draws its scroll-edge blur over the top of a Home Screen web app
unless a hit test at the top edge finds a fixed, viewport-wide box with
a plain background colour (WebKit's LocalFrameView::fixedContainerEdges,
which honours pointer-events on its first pass). The safe-area strip is
exactly that box; it no longer opts out of hit testing.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013GbLTGMZ45MV78qd2tHoco
This commit is contained in:
Claude committed 2026-10-05 15:58:12 +00:00
1 parent d6d80dac24
commit 2a360f0374
1 file changed
+7 -2
+7 -2
View File
@@ -3,8 +3,13 @@
in index.html — the only way to get a live status-bar tint on iOS PWA, since WebKit
ignores JS theme-color writes and media-variant theme-color tags in standalone mode.
Color tracks --page-bg (style.css), which follows .dark class.
It and the header below stay put through page transitions (jn-site-* in style.css). -->
<div class="jn-site-status-bar fixed top-0 left-0 right-0 z-50 pointer-events-none transition-colors duration-300"
It and the header below stay put through page transitions (jn-site-* in style.css).
It stays hit-testable on purpose: iOS 26+ decides whether to draw its Liquid Glass
scroll-edge blur over the top of a Home Screen web app by hit-testing the top edge
for a fixed, viewport-wide box with a plain background colour (WebKit
LocalFrameView::fixedContainerEdges); pointer-events: none would hide this strip
from that first pass. -->
<div class="jn-site-status-bar fixed top-0 left-0 right-0 z-50 transition-colors duration-300"
style="height: env(safe-area-inset-top); background: var(--page-bg);" aria-hidden="true"></div>
<header
class="jn-site-nav fixed top-[env(safe-area-inset-top)] left-0 right-0 z-40 w-full border-b transition-transform duration-300 ease-out will-change-transform"