ionic-team / ionic-team/ionic-framework
bug: card modal gesture is incorrect when webview resizes
- 主要语言
- 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/.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
贡献指南
调研方向
No source file or test is named. Start with the linked reproduction and reproduce the card modal gesture using a 300px bottom margin on ion-app, then compare behavior before and after the modal is reopened. Done means the dialog follows the user's finger 1:1 when the webview or page has resized.
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- ios, react, typescript
- 领域
- frontend, mobile
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100