ionic-team / ionic-team/ionic-framework

bug: UI Jumping When Opening Keyboard in Chat Page

未关闭
#30,268 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
triage
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

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

v8.x

### Current Behavior

When opening the keyboard in a chat page where the input field (`ion-input`) is placed in the footer (`ion-footer`), several UI jumps occur:
1. **Jump before the keyboard opens** – The Safe Area at the bottom is removed just before the keyboard appears, causing the messages to shift slightly downward.
2. **Jump after the keyboard opens** – The footer does not move smoothly with the keyboard animation but instead jumps above the keyboard after it fully opens.
3. **Scrolling issue** – After opening the keyboard, the page does not automatically scroll to the last seen message before the keyboard opened, requiring manual scrolling to find the previously viewed message.

### Expected Behavior

- The Safe Area at the bottom should remain stable before the keyboard opens.
- The footer should move smoothly along with the keyboard without additional jumps.
- The page should automatically scroll so that the last seen message before opening the keyboard remains visible.

### Steps to Reproduce

1. Scroll down to the bottom of the chat page.
2. Click on the input field to open the keyboard.
3. Observe the UI behavior, noting the jumps and scrolling issues.

https://github.com/user-attachments/assets/6882ff3e-e1bd-40a7-ad6d-30436d30af53

### Code Reproduction URL

https://github.com/tzdevelopteam/chat-issue

### Ionic Info

- **Capacitor Version**: 7.1.0
- **Platform**: iOS / Android

### Additional Information

Tried modifying settings, including keyboardResize in capacitor.config.ts, but the issue persists.

贡献指南

打开贡献指南

调研方向

Start with the linked chat reproduction at github.com/tzdevelopteam/chat-issue and reproduce the keyboard-opening behavior on iOS and Android. Inspect the keyboardResize setting and the chat page's ion-input in ion-footer; done means the safe area stays stable, the footer follows the keyboard smoothly, and the previously seen message remains visible.

由索引模型根据 Issue 内容生成。

评估

技术栈
android, ios, typescript
领域
frontend, mobile-dev
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
42/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。