bug: UI Overlap with System Navigation Buttons on Android 15 in 3-Button Navigation Mode

[contact2saurabh094]

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

v7.x

Current Behavior

I have designed a project using Ionic 7 and Capacitor 7, where I have implemented tabs navigation. When I build the Android APK and run it on Android 15, the UI/UX appears fine when gesture navigation is enabled. However, when I switch to 3-button navigation, the system navigation buttons overlap with the app's buttons, causing the UI to become distorted and negatively affecting the user experience.

Expected Behavior

App Height must be auto adjustable

Steps to Reproduce

Code Reproduction URL

https://github.com/

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\dell\AppData\Roaming\nvm\v22.5.1\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.5.2
@angular-devkit/build-angular : 18.2.16
@angular-devkit/schematics : 18.2.16
@angular/cli : 18.2.16
@ionic/angular-toolkit : 11.0.1

Capacitor:

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

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v22.5.1 (C:\Program Files\nodejs\node.exe)
npm : 10.8.2
OS : Windows 10

Additional Information

No response

[danielehrhardt]

Set your capacitor.config.ts ➤ android ➤ adjustMarginsForEdgeToEdge: 'auto',