[Bug]: Native overscroll does not behave as expected

Aperta
#8,187 2 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
android, angular, html
Ambito
mobile-dev

Direzione di ricerca

Inizia con la riproduzione collegata di cap-test e ispeziona src/app/app.html intorno alle righe 48-61 per comprendere il layout. Confronta il comportamento di overscroll su Android con l’issue correlata #30207 e verifica che il body possa estendersi mentre header e footer rimangono invariati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

triage
Capacitor Version
Installed Dependencies:

  @capacitor/cli: 7.4.3
  @capacitor/core: 7.4.3
  @capacitor/android: 7.4.3
  @capacitor/ios: 7.4.3

[success] Android looking great! 👌
Platforms Affected
  • iOS
  • Android
  • Web
Current Behavior
The problem

I set up a new Angular project (v20) using the latest Capacitor version (v7). My goal is to build a native Android app where the main body overscrolls (causing a stretch effect) but the footer isn't affected by overscrolling, just like native Android apps.

By default, the whole WebView stretches on overscroll and is not possible to "detach" the footer and prevent stretching. Disabling overscrolling as suggested in #5384 is an option but it prevents overscrolling/stretching inside the body of the app which does not feel native.

I attempted to use ion-footer and @ionic/core, but that did not resolve the issue either:

 <ion-content>
    // body...
 </ion-content>

 <ion-footer>
    <nav>...</nav>
 </ion-footer>

See how the <ion-footer> stretches on overscroll:

Related open issue: 30207

Expected Behavior

On overscroll, the header/footer components should not be affected by the stretching effect on Android.

Project Reproduction

https://github.com/AlexandrosGounis/cap-test

Additional Information

See the example in app.html

Lingua principale
TypeScript
Stelle
16.7k
Fork
1.3k
Merge medio
3g 10h
PR unite (30g)
10

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di ionic-team/capacitor

Tutte le issue di ionic-team/capacitor

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.