From 283e0f8299dc1d89b6d2258d4c86289e2cdc5a22 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 19 May 2026 07:22:06 +0000 Subject: [PATCH] Fix hamburger hidden on iOS: hide sidebar with visibility on mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit iOS Safari can fail to honour transform: translateX(-100%) on position:fixed elements, leaving the sidebar sitting over the content at z-index 100 and blocking the mobile-header (z-index 50) that contains the hamburger. Add visibility: hidden to the closed mobile sidebar. A transition-delay of 0.3s (matching the transform duration) keeps the slide-out animation intact — the sidebar slides away first, then disappears. The open state resets the transition immediately so the sidebar becomes visible before sliding in. https://claude.ai/code/session_017r3kqm4FgEGy2DPPzYcLYQ --- app/index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/index.html b/app/index.html index c0e2dc4..d811dc9 100644 --- a/app/index.html +++ b/app/index.html @@ -171,7 +171,7 @@ body { flex-direction: column; overflow-y: auto; z-index: 100; - transition: background-color 0.2s ease, transform 0.3s ease; + transition: background-color 0.2s ease, transform 0.3s ease, visibility 0s ease 0.3s; } .layout-sidebar.nav-left .sidebar { left: 0; } @@ -738,12 +738,13 @@ body { .layout-sidebar .sidebar { transform: translateX(-100%); + visibility: hidden; width: 80vw; max-width: 320px; box-shadow: var(--shadow-md); } .layout-sidebar.nav-right .sidebar { transform: translateX(100%); } - .layout-sidebar .sidebar.open { transform: translateX(0); } + .layout-sidebar .sidebar.open { transform: translateX(0); visibility: visible; transition: background-color 0.2s ease, transform 0.3s ease; } .layout-sidebar .main-area { margin-left: 0 !important; margin-right: 0 !important; } .main-content { padding: 1rem 1.25rem 3rem; }