fix: Bildschirmtastatur quetscht den Editor nicht mehr zusammen
Die eigentliche Ursache der Meldung — meine erste Diagnose (Titelzeilen-Tipp im
alten Splitter-Modell) war für 1.1.39 richtig, aber nicht das, was der Nutzer
auf dem Pages-Build sah.
setAppHeight() schreibt visualViewport.height nach --app-height, und
body{height:var(--app-height)} macht daraus die Höhe der ganzen Seite. Genau
diesen Wert verkleinert die Bildschirmtastatur — dafür ist visualViewport
gemacht. Nachgemessen linear: Textfeldhöhe = --app-height minus ~206 px feste
Aufbauten. 812 px -> 606 px Text, 440 -> 234, 260 -> 54 px, also drei Zeilen.
Das ist das gemeldete „komplett zusammengeklappt".
Sichtbar ausschließlich auf echten Geräten: In der Emulation gibt es keine
Tastatur, deshalb liefen alle drei Reproduktionsversuche vorher ins Leere.
Unterschieden wird am Fokus, nicht an der Größe: Tastatur und überlagernde
Browserleiste (Brave, der ursprüngliche Anlass des Mechanismus) erzeugen
dieselbe Signatur — vv.height fällt, innerHeight bleibt. Die Tastatur steht
aber nur, wenn ein editierbares Feld den Fokus hat. Solange das so ist, bleibt
die letzte tastaturfreie Höhe stehen; die Seite behält ihre Größe und der
Browser schiebt den Ausschnitt zur Schreibmarke.
Mit nachgebildetem visualViewport geprüft: mit Fokus im Textfeld 812/606 px
(unverändert), ohne Fokus 440/234 px — die Brave-Leiste wirkt also weiter.
orientationchange durchbricht die Sperre (sonst behielte die Seite beim Drehen
während des Tippens das alte Hochformat); der focusout-Timer ruft
() => setAppHeight(), sonst reichte er ein wahres `force` durch.
D17 (Nachtrag 4) und frontend/CLAUDE.md nachgezogen, samt der Lehre: Ein
„nicht reproduzierbar" aus dem Emulator ist bei geräteabhängigen Meldungen
kein Befund (vgl. D25 zu synthetischen TouchEvents).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Fable 5
parent
1bda54ae59
commit
6463a76e1e
@@ -398,6 +398,18 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der
|
||||
**einzige** Touch-Navigation Text → Diagramm (Alt gibt es dort nicht). Keinen
|
||||
langen Druck ins Textfeld legen — der gehört dem OS (Wortauswahl,
|
||||
Auswahlgriffe), anders als im Diagramm, wo D25 ihn sich nehmen konnte.
|
||||
- `--app-height` (`setAppHeight()`, D17-Nachtrag 4): `body{height:var(--app-height)}`
|
||||
kommt aus `visualViewport.height` — nötig gegen überlagernde Browserleisten
|
||||
(Brave). **Die Bildschirmtastatur verkleinert denselben Wert** und quetschte
|
||||
damit den Editor zusammen, sobald der Cursor ins Textfeld kam (Textfeldhöhe =
|
||||
`--app-height` − ~206 px feste Aufbauten; bei 260 px Viewport bleiben 54 px).
|
||||
Deshalb die Fokus-Sperre `editingNow()`: Solange ein editierbares Feld den
|
||||
Fokus hat, bleibt die letzte tastaturfreie Höhe stehen. Tastatur und
|
||||
Browserleiste sind an den **Zahlen** nicht zu unterscheiden (beide: `vv.height`
|
||||
fällt, `innerHeight` bleibt) — nur am Fokus. `orientationchange` ruft
|
||||
`setAppHeight(true)` und durchbricht die Sperre; der `focusout`-Timer muss
|
||||
`() => setAppHeight()` sein, sonst reicht er ein wahres `force` durch.
|
||||
**Nur auf echten Geräten sichtbar** — in der Emulation gibt es keine Tastatur.
|
||||
**Der verborgene Bereich ist `display:none` und misst sich damit zu null** —
|
||||
`setMobilePane()` MUSS neu zeichnen: zum Diagramm hin dieselben vier Schritte
|
||||
wie `applyLayout` (`applyOptStairs`/`alignStems`/`drawCheapPath`/
|
||||
|
||||
+31
-5
@@ -2862,17 +2862,43 @@ function isMobile(){ return mqMobile.matches; }
|
||||
zeichnen: 100dvh meldet dann weiterhin die volle Höhe, und Footer/Editor-
|
||||
Titelzeile verschwinden dahinter. visualViewport.height liefert die wirklich
|
||||
sichtbare Fläche. Fällt es weg, greift die CSS-Kaskade (dvh/vh). */
|
||||
function setAppHeight(){
|
||||
/* ABER: Die **Bildschirmtastatur** verkleinert genau diesen Wert — dafür ist
|
||||
`visualViewport` gemacht. Ungefiltert übernommen quetscht sie den Editor
|
||||
zusammen, sobald man den Cursor ins Textfeld setzt: Die Textfeldhöhe ist
|
||||
`--app-height` minus rund 206 px feste Aufbauten (Kopfzeile, Titelzeile,
|
||||
Fußzeile), aus 812 px werden also mit offener Tastatur schnell 260 px und
|
||||
damit ein Textfeld von 54 px. Genau das war die Fehlermeldung — und sie
|
||||
zeigt sich **nur auf echten Geräten**, weil es in der Emulation keine
|
||||
Tastatur gibt.
|
||||
Unterschieden wird am **Fokus**: Die Tastatur steht nur, wenn ein
|
||||
editierbares Feld den Fokus hat. Solange das so ist, bleibt die zuletzt
|
||||
tastaturfreie Höhe stehen — die Seite behält ihre Größe und der Browser
|
||||
schiebt den sichtbaren Ausschnitt zur Schreibmarke, wie in jeder anderen
|
||||
App. Die Brave-Leiste (der eigentliche Anlass) wird davon nicht berührt,
|
||||
sie erscheint ohne Fokus im Textfeld. */
|
||||
function editingNow(){
|
||||
const el = document.activeElement;
|
||||
if(!el) return false;
|
||||
return el.tagName === 'TEXTAREA' || el.tagName === 'INPUT' || el.isContentEditable;
|
||||
}
|
||||
function setAppHeight(force){
|
||||
if(!force && editingNow()) return;
|
||||
const vv = window.visualViewport;
|
||||
const h = vv ? vv.height : window.innerHeight;
|
||||
document.documentElement.style.setProperty('--app-height', Math.round(h) + 'px');
|
||||
}
|
||||
setAppHeight();
|
||||
window.addEventListener('resize', setAppHeight);
|
||||
window.addEventListener('orientationchange', setAppHeight);
|
||||
setAppHeight(true);
|
||||
window.addEventListener('resize', () => setAppHeight());
|
||||
/* Drehen MUSS auch beim Tippen greifen — sonst behielte die Seite die Höhe des
|
||||
alten Hochformats. */
|
||||
window.addEventListener('orientationchange', () => setAppHeight(true));
|
||||
if(window.visualViewport){
|
||||
window.visualViewport.addEventListener('resize', setAppHeight);
|
||||
window.visualViewport.addEventListener('resize', () => setAppHeight());
|
||||
}
|
||||
/* Nach dem Verlassen des Textfelds nachziehen: Die meisten Browser melden das
|
||||
Schließen der Tastatur ohnehin als `resize`, aber dann steht der Fokus schon
|
||||
woanders — und falls die Meldung ausbleibt, holt es dieser Weg nach. */
|
||||
window.addEventListener('focusout', () => setTimeout(() => setAppHeight(), 250));
|
||||
/* ---------- Legende: auf/zu + Splitter zum Editor (D26) ----------
|
||||
Die Legende ist ein gewöhnlicher Container (kein <details> mehr, siehe
|
||||
style.css/D26); der Auf-/Zu-Zustand hängt an der Klasse `open`. */
|
||||
|
||||
Reference in New Issue
Block a user