ionic-team / ionic-team/ionic-framework
bug: ion-datetime wheel breaks in Android WebView with scaled fonts
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 14 小时
- 30 天内合并 PR
- 50
描述
### 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 ion-datetime is used in a WebView (Capacitor in our case) with font size scaled up by the OS, it becomes impossible to set any date as the wheel will start rotating on its own until it reaches its start.
Video of this issue in Ionic 8.2.5
https://github.com/user-attachments/assets/f714e7a8-0dc1-40ee-88aa-bf07a668acf5
### Expected Behavior
The wheel should haldle the lack of space more graciously. Of course at some point the screen real estate becomes so small it's impossible for it to work/be displayed correctly, but current behaviour is a regression from Ionic 7.
Video of this not being an issue in Ionic 7(.8.6):
https://github.com/user-attachments/assets/f6b6292d-e265-40c7-b4cb-5aa67e27a0e3
The alignment is a little bit wonky and at one point in the video it got stuck in between two values, but it mostly works fine.
### Steps to Reproduce
1) Go to the linked highly rudimentary stackblitz demo
2) Open devtools and change the ion-datetime's font-size from 22px to 27px (usually you can't change this value since it's hidden inside shadow DOM, but Android itself can)
3) Try setting a date
### Code Reproduction URL
https://stackblitz.com/edit/angular-d2mwre?file=src%2Fapp%2Fexample.component.html
### Ionic Info
Ionic:
Ionic CLI : 7.2.0 (/[redacted]/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.2.5 (/[redacted]/node_modules/@ionic/angular)
@angular-devkit/build-angular : 18.0.7 (/[redacted]/node_modules/@angular-devkit/build-angular)
@angular-devkit/schematics : 18.0.7 (/[redacted]/node_modules/@angular-devkit/schematics)
@angular/cli : 18.0.7 (/[redacted]/node_modules/@angular/cli)
@ionic/angular-toolkit : not installed
Capacitor:
Capacitor CLI : 6.1.0
@capacitor/android : 6.1.0 (/[redacted]/node_modules/@capacitor/android)
@capacitor/core : 6.1.0 (/[redacted]/node_modules/@capacitor/core)
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v20.10.0 (/[redacted]/.nvm/versions/node/v20.10.0/bin/node)
npm : 10.2.3
OS : macOS Unknown
### Additional Information
This issue only happens when the font-size is scaled, when ion-datetime simply runs out of space it will overflow, but it will still be possible to select a date, despite it being a highly suboptimal situation.
贡献指南
调研方向
从 src/app/example.component.html 中链接的 StackBlitz 复现开始,将字体大小从 22px 改为 27px,以复现 ion-datetime 滚轮的行为。比较 Ionic 8.2.5 与 Ionic 7.8.6 中的行为;当滚轮在缩放后的 Android WebView 字体下仍可选择,且没有出现所述回归时,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- android, angular, typescript
- 领域
- frontend, mobile
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 48/100