From 57ba2c06f975b73c64fdbbf881828716dc9dcf6f Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 26 Sep 2026 15:43:37 +0000 Subject: [PATCH] App-Ansicht iOS-App: undurchsichtige Statusleiste, Tab-Leiste wieder ganz unten Der Fix aus bd7b1fc (Seite mindestens bildschirmhoch) hat nicht gewirkt und wird zurueckgenommen. Die Ursache ist nicht die Seitenhoehe: Bei black-translucent ist der Bereich fuer fixierte Elemente in der installierten iOS-App um die Statusleiste (59 pt) kuerzer als der Bildschirm. Solange die Seite oben steht, klebt dieser Bereich oben, und die Tab-Leiste haengt ueber dem unteren Rand. Nach dem Herunterscrollen sitzt sie richtig, deshalb sah es nur im Chat gut aus. Mit undurchsichtiger Statusleiste (black) beginnt die App unterhalb der Statusleiste, und der Bereich ist korrekt bemessen. Nachteil: Der lila Schimmer reicht nicht mehr hinter die Uhrzeit. Die Abstaende oben kommen weiter aus env(safe-area-inset-top), das dann 0 ist. Browser, Android und Desktop unveraendert (pixelgleich). Co-Authored-By: Claude Opus 5.5 --- public/app.js | 14 -------------- public/dashboard.html | 4 +++- public/kundenbereich.css | 5 ++--- public/login.css | 3 --- public/login.html | 4 +++- 5 files changed, 8 insertions(+), 22 deletions(-) diff --git a/public/app.js b/public/app.js index e2a6bb7..236b8ac 100644 --- a/public/app.js +++ b/public/app.js @@ -1678,20 +1678,6 @@ function preventIosFocusZoom() { } preventIosFocusZoom() -// Installierte App auf dem iPhone: Mit durchsichtiger Statusleiste (black-translucent) ist der -// Layout-Bereich oft um die Hoehe der Statusleiste kuerzer als der Bildschirm (bekannter WebKit-Fehler). -// Ist die Seite kuerzer als der Bildschirm, haengen fixierte Leisten dann so weit ueber dem unteren Rand. -// Abhilfe: Seite mindestens bildschirmhoch (--kb-screen-h in login.css/kundenbereich.css). Die Hoehe -// kommt aus screen.*, weil innerHeight/100dvh in diesem Zustand selbst zu kurz sein koennen. -function syncIosStandaloneHeight() { - if (!isIosDevice() || !isStandaloneApp()) return - const landscape = window.matchMedia('(orientation: landscape)').matches - const full = landscape ? Math.min(screen.width, screen.height) : Math.max(screen.width, screen.height) - if (full > 0) document.documentElement.style.setProperty('--kb-screen-h', `${full}px`) -} -syncIosStandaloneHeight() -window.addEventListener('resize', syncIosStandaloneHeight) - // App-Installation (Homescreen) und Offline-Seite; zwischengespeichert wird nur die Offline-Seite (sw.js) if ('serviceWorker' in navigator && window.isSecureContext) { window.addEventListener('load', () => { diff --git a/public/dashboard.html b/public/dashboard.html index 1322569..b37b96a 100644 --- a/public/dashboard.html +++ b/public/dashboard.html @@ -12,7 +12,9 @@ - + + diff --git a/public/kundenbereich.css b/public/kundenbereich.css index c3733ea..aa9954e 100644 --- a/public/kundenbereich.css +++ b/public/kundenbereich.css @@ -590,12 +590,11 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; } .kb-invoices .inv-actions .btn-link:first-child:not(:last-child) { flex: 1.7; } /* Chat: fuellt den Platz zwischen App-Leiste und Tab-Leiste. 100dvh folgt auf Android der Tastatur - (interactive-widget=resizes-content); auf iOS bleibt die Hoehe, Safari schiebt das Feld selbst hoch. - Installierte App auf dem iPhone: Bildschirmhoehe (--kb-screen-h), dvh ist dort teils zu kurz */ + (interactive-widget=resizes-content); auf iOS bleibt die Hoehe, Safari schiebt das Feld selbst hoch */ #view-chat.active { display: flex; flex-direction: column; height: calc(100vh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px); - height: calc(max(100dvh, var(--kb-screen-h, 0px)) - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px); + height: calc(100dvh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px); } #view-chat .kb-head { flex: none; margin-bottom: 12px; } #view-chat .chat-box { flex: 1 1 auto; min-height: 0; height: auto; padding: 10px; border-radius: 20px; } diff --git a/public/login.css b/public/login.css index c602f14..8db3562 100644 --- a/public/login.css +++ b/public/login.css @@ -11,9 +11,6 @@ --glass: rgba(255, 255, 255, 0.25); --glass-border: rgba(255, 255, 255, 0.12); min-height: 100svh; - /* Installierte App auf dem iPhone: mindestens bildschirmhoch, sonst haengen fixierte Leisten - ueber dem unteren Rand (iOS-Fehler bei black-translucent, siehe syncIosStandaloneHeight in app.js) */ - min-height: max(100svh, var(--kb-screen-h, 0px)); margin: 0; background: #0a0a0a; color: #fff; diff --git a/public/login.html b/public/login.html index 734834e..0c33f34 100644 --- a/public/login.html +++ b/public/login.html @@ -12,7 +12,9 @@ - + +