ionic-team / ionic-team/ionic-framework

bug: scroll assist needs improved keyboard estimation on web

Đang mở
#23,664 25 bình luận 2 reaction 0 người được giao Xem trên GitHub
package: core type: bug
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ả

### Prequisites

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

- [ ] v4.x
- [X] v5.x
- [ ] v6.x

### Current Behavior

On iOS Safari (and as an app with "Add to Home Screen"), there is an uncomfortable pause when switching between inputs.

### Expected Behavior

When tapping another input on the page to switch focus, there should be no delay when no scrolling is required and keyboard remains open.

### Steps to Reproduce

1. Open following app in Safari on iOS/iPadOS device or simulator:
- with "Device Preview" QR-code on https://dashboard.ionicframework.com/preview/f7e6e842/mbb6khxjl9
- or directly at https://mbb6khxjl9.appflowapp.com/
2. tap "Address Line 1"
- caret appears at the beginning of Address Line 1
- keyboard shows up
3. tap "Address Line 2"
- caret disappears from "Address Line 1"
- keyboard stays open
- **-- awkward pause lasting about a second --**
- caret appears at the beginning of Address Line 2

reproducible on:
- iPad Air 2 (iPadOS 14.6)
- iPhone 12 mini (iOS 14.4; on Simulator)

### Code Reproduction URL

https://github.com/ippeiukai/ionic-safari-input-issue-23664

### Ionic Info

```
$ ionic info

Ionic:

Ionic CLI : 5.4.16 (/■■■■■■■/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.6.11
@angular-devkit/build-angular : 12.1.2
@angular-devkit/schematics : 12.1.2
@angular/cli : 12.1.2
@ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.1.1
@capacitor/core : 3.1.1

Utility:

cordova-res : not installed
native-run : 1.4.0

System:

NodeJS : v12.22.3 (/■■■■■■■/bin/node)
npm : 6.14.13
OS : macOS Catalina

────────────────────────────────────────────────────────────

Ionic CLI update available: 5.4.16 → 6.11.8

The package name has changed from ionic to @ionic/cli!

To update, run: npm uninstall -g ionic
Then run: npm i -g @ionic/cli

────────────────────────────────────────────────────────────
```

### Additional Information

Observing the DOM with Web Inspector suggests the `relocateInput` hack is being executed when "Address Line 2" is tapped, although there is no scrolling happening and the keyboard is already open and remains open.
https://github.com/ionic-team/ionic-framework/blob/v5.6.11/core/src/utils/input-shims/hacks/common.ts#L14

Our production app (which uses @ionic/angular 5.3.3) is affected and one of the views has severely degraded user experience as a result. Any help or workaround would be greatly appreciated.

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

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

Đánh giá

Issue này chưa được đánh giá.

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.