bug: Tabs behind chrome navigation bar at the bottom

[kesava-cams]

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
• v7.x
• Nightly

Current Behavior

When we open the Ionic application in Mobile Chrome/Safari, the tabs are behind the chrome navigation bar.

Expected Behavior

Unless I go full screen in chrome or install it as an app, tabs doesn't show up. Below is the expected behavior

Steps to Reproduce

Here's the code I have

My Team

<ion-tab-button tab="not-submitted">
  <ion-icon name="people-outline"></ion-icon>
  <ion-label>Not submitted</ion-label>
</ion-tab-button>


<ion-tab-button tab="alt-approver">
  <ion-icon name="repeat-outline"></ion-icon>
  <ion-label>Alternate Approver</ion-label>
</ion-tab-button>

<ion-tab-button tab="message">
  <ion-icon name="mail-outline"></ion-icon>
  <ion-label>Message</ion-label>
</ion-tab-button>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.8 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.5.6
@angular-devkit/build-angular : 14.2.10
@angular-devkit/schematics : 14.2.10
@angular/cli : 14.2.10
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.4.0
@capacitor/android : not installed
@capacitor/core : 4.4.0
@capacitor/ios : not installed

Utility:

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

System:

NodeJS : v18.14.1 (/usr/local/bin/node)
npm : 9.3.1
OS : Linux 5.15

Cordova: 10.0.0 (cordova-lib@10.1.0)

Additional Information

No response

[liamdebeasi]

Thanks for the report. Can you reproduce this in an Ionic starter app and provide a link to the repo?

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!