From 49203f202c319964ff16783ad711a820fede68ca Mon Sep 17 00:00:00 2001
From: KoyoNoguchi <koo.ooy504405@gmail.com>
Date: Wed, 21 Oct 2026 22:40:32 +0900
Subject: [PATCH] Keep nav bar buttons above the blur layer on iOS Safari

iOS Safari can paint a backdrop-filter layer over later siblings even
while it is transparent, which dimmed the back button at the top of the
page. Put the nav content on its own layer above the material and only
apply the blur once the page has scrolled.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/assets/style.css | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/public/assets/style.css b/public/assets/style.css
index 574b79a..28ab6ad 100644
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -251,15 +251,16 @@ a {
   position: sticky;
   top: 0;
   z-index: 10;
+  isolation: isolate;
   padding-top: env(safe-area-inset-top);
 }
+/* ぼかしはスクロールしたときだけ付ける。iOS Safari は透明でもぼかしの層をボタンの上に描くことがあるため */
 .nav-bar::before {
   content: "";
   position: absolute;
   inset: 0;
+  z-index: -1;
   background: var(--material-bar);
-  -webkit-backdrop-filter: blur(30px) saturate(150%);
-  backdrop-filter: blur(30px) saturate(150%);
   opacity: 0;
   transition: opacity 0.2s ease;
 }
@@ -271,9 +272,8 @@ a {
   top: 100%;
   height: 16px;
   pointer-events: none;
+  z-index: -1;
   background: linear-gradient(var(--material-bar), transparent);
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
   -webkit-mask-image: linear-gradient(#000, transparent);
   mask-image: linear-gradient(#000, transparent);
   opacity: 0;
@@ -283,8 +283,18 @@ a {
 .nav-bar.scrolled::after {
   opacity: 1;
 }
+.nav-bar.scrolled::before {
+  -webkit-backdrop-filter: blur(30px) saturate(150%);
+  backdrop-filter: blur(30px) saturate(150%);
+}
+.nav-bar.scrolled::after {
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+}
+/* ボタンと見出しはぼかしの層より必ず手前に */
 .nav-inner {
   position: relative;
+  z-index: 1;
   max-width: 600px;
   height: 44px;
   margin: 0 auto;