App-Ansicht iOS: Chat-Eingabe springt nicht mehr weg, kein Zoom beim Tippen

Auf dem iPhone sprang die Seite beim Tippen ins Chatfeld weg (nur die
Fusszeile war zu sehen), zoomte hinein und liess sich danach seitlich
schieben. Beides sind bekannte Safari-Effekte:

- window.scrollTo(0, 0) bei offener Tastatur kaempft gegen Safaris eigenes
  Hochschieben des Feldes und ist entfernt, ebenso das Verkleinern des
  Chats auf die sichtbare Hoehe, das das schon hochgeschobene Feld wieder
  aus dem Bild rutschen liess. Der Chat nutzt jetzt 100dvh: auf Android
  folgt das der Tastatur (interactive-widget=resizes-content), auf iOS
  bleibt die Hoehe stabil.
- Auf iOS aendert sich beim Fokus keine Hoehe mehr (die Tab-Leiste wird
  nur optisch ausgeblendet). Ist die Chat-Eingabe nach der
  Tastatur-Animation doch verdeckt, wird sie gezielt nachgeschoben
  (gemessen am visualViewport).
- iOS zoomt beim Fokus, wenn die Schrift effektiv unter 16 px liegt, z. B.
  bei Safari-Seitenzoom unter 100 %. maximum-scale=1 nur auf iOS verhindert
  diesen automatischen Zoom; mit zwei Fingern zoomen bleibt moeglich
  (WebKit ignoriert die Sperre dafuer seit iOS 10). Android bleibt
  unveraendert, dort wuerde es das Zoomen sperren.

Im Ruhezustand pixelgleich zu main (28 Ansichten).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed 2026-09-26 15:17:36 +00:00
1 parent 163ab88c35
commit d5bfd1be3d
2 files changed
+46 -14

No files matched your search

+8 -4
View File
@@ -441,7 +441,8 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
.kb-page.kb-typing { --kb-tabbar-h: 0px; }
/* Tastatur offen: auf Android wird der Platz der Tab-Leiste frei; auf iOS keine Hoehenaenderung (app.js) */
.kb-page.kb-typing:not(.kb-ios) { --kb-tabbar-h: 0px; }
html.kb-sheet-open { overflow: hidden; }
.kb-desk-only { display: none; }
.kb-app-only { display: inline; }
@@ -588,10 +589,12 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
.kb-invoices .inv-actions .btn-link:first-child { background: rgba(157, 61, 254, 0.18); border-color: var(--kb-purple-line); }
.kb-invoices .inv-actions .btn-link:first-child:not(:last-child) { flex: 1.7; }
/* Chat: fuellt den Platz zwischen App-Leiste und Tab-Leiste (bzw. Tastatur) */
/* 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 */
#view-chat.active {
display: flex; flex-direction: column;
height: calc(var(--kb-vvh, 100dvh) - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
height: calc(100vh - 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; }
@@ -631,7 +634,8 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
.kb-sheet { inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; }
.kb-sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
.kb-sheet-panel {
max-height: calc(var(--kb-vvh, 100dvh) - env(safe-area-inset-top) - 24px); overscroll-behavior: contain;
max-height: calc(100vh - env(safe-area-inset-top) - 24px); max-height: calc(100dvh - env(safe-area-inset-top) - 24px);
overscroll-behavior: contain;
padding: 8px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
border-radius: 24px 24px 0 0; border-bottom: none; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
transition: transform 0.24s ease-in;