ionic-team / ionic-team/ionic-framework

bug: card modal gesture is incorrect when webview resizes

Đang mở
#28,542 0 bình luận 0 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ả

### Prerequisites

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

v7.x

### Current Behavior

When using [capacitor keyboard resize mode = ionic](https://capacitorjs.com/docs/apis/keyboard#keyboardresize) with open keyboard, gestures on a card modal sometimes don't stick to the user's touch gesture.

If you drag down, the dialog goes further than your drag (gesture seems amplified).

### Expected Behavior

The ionic dialog should follow my finger 1:1 when dragging.

### Steps to Reproduce

Real scenario reproduction:

1. Clone repro, install, `ionic capacitor build ios`, run on device
2. Open dialog. Keyboard should appear. Try to swipe down. Notice the dialog handle follows your finger perfectly.
3. Close dialog and try again. Second time usually reproduces for me. (I believe there is a race condition between Ionic dialog setup before Capacitor keyboard resizes the page)

Testing/non-flakey reproduction:

Luckily, it's quite easy to simulate ionic keyboard resize mode = "ionic" by simply setting `margin-bottom: 300px` or so to ``.

If you do this, you can always reproduce the issue when you open and attempt to drag the dialog, even in a chrome/firefox device simulator.

### Code Reproduction URL

https://github.com/aeharding/ionic-drag

### Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/Users/aeharding/.nvm/versions/node/v20.8.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.5.5

Capacitor:

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

Utility:

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

System:

NodeJS : v20.8.1 (/Users/aeharding/.nvm/versions/node/v20.8.1/bin/node)
npm : 10.1.0
OS : macOS Unknown

### Additional Information

Real scenario with Capacitor keyboard ionic mode:

https://github.com/ionic-team/ionic-framework/assets/2166114/8b4795a8-f79e-4e16-9c7b-3ef780fdf114

Browser simulation (setting margin-bottom):

https://github.com/ionic-team/ionic-framework/assets/2166114/44cca83a-f771-4f98-8519-ed47ba44d766

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.