bug: ion-header disappears on mobile browser when keyboard opens - tabbed app

[JoeBoxr]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Using a tabbed app in the mobile browser the ion-header is being pushed off the top when the mobile keyboard opens. Please note this issue only occurs when fullscreen is set to true.

Expected Behavior

Header stays positioned at the top.

Steps to Reproduce

Hello.

To create the bug:

1. Create tabbed app for a mobile browser
2. On a tab page place a ion-header and ion-content with fullscreen set to true
3. Add a div to the tab page with a view height of roughly 70 depending on your device
4. Add a ion-input to activate the mobile keyboard
5. ion-header will get pushed off the screen

Sample code below:

<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Tab 1
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<div style="height: 70vh">
Mobile Device Fullscreen Header Bug - [fullscreen]="true"
</div>
<ion-item>
<ion-input placeholder="Click Here - Watch Header Disappear"></ion-input>
</ion-item>
</ion-content>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 5.4.4 (C:\Users\Admin\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 6.1.0
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v14.17.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.13
OS : Windows 10

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[JoeBoxr]

Preview this on an android chrome browser. You will notice once your keyboard comes up how the Tab 1 header gets pushed up and doesn't come back

https://stackblitz.com/edit/angular-ivy-ptcjwe

[JoeBoxr]

Found a workaround for the bug by hiding the tabs at the bottom when the keyboard is toggled.

[liamdebeasi]

Thanks! I can reproduce this behavior. This appears to be caused by #18532, so I am going to merge the two issues. The linked has to do with Cordova/Capacitor apps, but it is the same problem in a web browser as well.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.