Der innere Bildlauf mit ionischem Angular-Ioneninhalt hat unter iOS eine Höhe von Null und verhindert das Scrollen – all ⇐ IOS

[Anonymous]

Ich habe eine Ionic Angular-Anwendung, bei der das Scrollen unter iOS vollständig funktioniert (Safari, Firefox, Edge – alle WebKit-basiert). Desktop-Browser funktionieren einwandfrei. Die diagnostischen Beweise zeigen, dass das .inner-scroll-Element im Schatten-DOM von ion-content vollständig auf die Höhe Null kollabiert ist.
Umgebung

• Ionic: mit eigenständigen Angular-Komponenten
• Plattform: iOS (alle Browser)
• Status: Desktop funktioniert einwandfrei, iOS völlig kaputt
• Verhalten: Inhalt kann nur um ein paar Pixel „wackeln“, kein tatsächliches Scrollen

Aktuelles Setup
Vorlage:
html

Code: Select all

Relevantes globales CSS:
scss

Code: Select all

ion-content {
--background: var(--ion-background-color);
--color: var(--ion-text-color);
--padding-bottom: 130px;
overscroll-behavior: contain;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}

Plattformspezifisches CSS (responsive.scss):
scss

Code: Select all

body.ios ion-content {
--offset-bottom: auto !important;
--overflow: auto;  // Changed from 'hidden'
}

Bereits versuchte Korrekturen (keine funktionierten)

• --overflow von versteckt in automatisch geändert
• Ergebnis: keine Änderung, Höhe immer noch 0.
• Laufzeitberechnung der Ansichtsfensterhöhe hinzugefügt
• Keine Änderung, Höhe immer noch 0
• Alle Z-Indexe entfernt: -1
• Keine Änderung
• Sichergestellt [fullscreen]="true" auf allen Seiten
• Keine Änderung
• Erhöht --padding-bottom
• Keine Änderung

Fragen

• Was könnte dazu führen, dass das .inner-scroll-Element von Ionic unter iOS die Höhe Null hat, wenn der übergeordnete ion-content ordnungsgemäß ist Höhe?
• Gibt es bekannte iOS-spezifische Probleme mit der Schatten-DOM-Scroll-Implementierung von Ionic?
• Was sollte ich sonst noch untersuchen? Mögliche Bereiche:
  • Vorlagenstruktur (Wrapper-Elemente um Ion-Content?)
  • Probleme mit der Flexbox-Layoutkette?
  • JavaScript-Lebenszyklus-Hooks manipulieren das Layout?
  • Ionische Konfiguration für eigenständige Komponenten?
• Ist jemand auf dieses spezielle Symptom (0-Höhe Inner-Scroll) unter iOS gestoßen? Lösung gefunden?

Minimale Reproduktion
Alle betroffenen Seiten folgen dieser Struktur:
html

Code: Select all

Page Title

Funktioniert perfekt auf dem Desktop, völlig kaputt unter iOS (alle Browser).
Was ich brauche

• Verstehen, warum .inner-scroll auf die Höhe 0 reduziert wird
• Diagnoseschritte zur Identifizierung, was die Höhe einschränkt
• Lösungen, die über die Standardkorrekturen hinausgehen, die ich bereits versucht habe
• Alle iOS-spezifischen Ionic-Probleme, die mir möglicherweise fehlen

Dies verhindert, dass alle iOS-Benutzer die Anwendung verwenden. Jede Hilfe wäre sehr dankbar!