ionic-team / ionic-team/ionic-framework

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

Đang mở
#30,355 1 bình luận 1 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/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

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

![Image](https://github.com/user-attachments/assets/4ff474d5-318a-439c-8ba3-4552db27f71e)

![Image](https://github.com/user-attachments/assets/dccbd1b6-bdbe-4304-8579-525db77a4552)
![Image](https://github.com/user-attachments/assets/170a79e8-9e5d-4d29-8da2-7e4b6441c427)

### 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_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start by reproducing the tabs navigation project on Android 15 with 3-button navigation, comparing it with gesture navigation. Done means the system navigation buttons no longer overlap the app UI and the app height adjusts correctly; no source file or test is identified in the issue.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
android, angular, typescript
Lĩnh vực
frontend, mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
25/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.