Hello! We discovered a problem with the ion-content fullscreen property. It manifested on Android devices that use Google Chrome. When you apply fullscreen to the content component it sets the css properties –offset-top and –offset-bottom . This makes chrome hide address bar. When the address bar is being translated the footer starts moving upwards with the bar. I found out that reducing the --offset-top and --offset-bottom by one pixel prevents Chrome from hiding the address bar. The reason we need fullscreen is because we hide the header and footer when scrolling downwards.
I found the same issue on the official ionic docs when using the fullscreen property.
Is the ionic team aware of this problem, and will it be fixed? For now I will disable fullscreen on Android Web.
Hi Zlatko, searched for that just today as it was driving me nuts. This issue sums it up. I just use forceOverscroll=“false” and works good.
opened 01:32AM - 27 Aug 22 UTC
closed 01:20PM - 29 Aug 22 UTC
triage
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://git… hub.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.
### Ionic Framework Version
- [ ] v4.x
- [ ] v5.x
- [X] v6.x
- [ ] Nightly
### Current Behavior
When the style is IOS, the <main> in IonContent component in a Tab App would display an unexpected y-axis scroll bar, and the content inside the IonContent can be scroll up or down a little, maybe 1 or 2 px.

But this problem would be fixed if the style is MD,

or modify this part of css: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/content/content.scss

from
```
.overscroll::before {
bottom: -1px;
}
```
to
```
.overscroll::before {
bottom: 0px;
}
```
However, I cannot find a way to override this part of CSS.
Are there any way to fix this problem or just let me override this CSS?
### Expected Behavior
In iOS style,
After I cancel this bad css:

this unexpected scroll bar disappeared.

There shouldn't be an unexpected scroll bar.
### Steps to Reproduce
Create a new ionic 6 project from cli which the version as late as 2022-08-26.
Then modify any tab page, for example Tab3.tsx.
```
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Settings</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>123</IonContent>
</IonPage>
```
### Code Reproduction URL
_No response_
### Ionic Info
Ionic:
Ionic CLI : 6.20.1
Ionic Framework : @ionic/react 6.2.4
Capacitor:
Capacitor CLI : 4.1.0
@capacitor/android : not installed
@capacitor/core : 4.1.0
@capacitor/ios : not installed
Utility:
cordova-res : 0.15.4
native-run : 1.6.0
System:
NodeJS : v16.16.0
npm : 8.11.0
OS : Linux 5.15
### Additional Information
_No response_