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:
1 parent
163ab88c35
commit
d5bfd1be3d
2 files changed
+46
-14
No files matched your search
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user