ionic-team / ionic-team/capacitor
[Bug]: Native overscroll does not behave as expected
- Dominant language
- TypeScript
- Stars
- 16.7k
- Forks
- 1.3k
- Avg merge
- 3d 15h
- Merged PRs (30d)
- 10
Description
### 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
- [x] 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](https://ionicframework.com/docs/api/footer) and [@ionic/core](https://www.npmjs.com/package/@ionic/core), but that did not resolve the issue either:
```html
// body...
...
```
See how the `` stretches on overscroll:
Related open issue: [30207](https://github.com/ionic-team/ionic-framework/issues/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](https://github.com/AlexandrosGounis/cap-test/blob/main/src/app/app.html#L48-L61)
Contributor guide
Assessment
This issue has not been assessed yet.