ionic-team / ionic-team/ionic-framework

bug: ion-datetime wheel breaks in Android WebView with scaled fonts

Aperta
#29,713 10 commenti 6 reazioni 0 assegnatari Vedi su GitHub
package: core type: bug
Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
1g 15h
PR unite (30g)
51

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Start with the linked StackBlitz reproduction in src/app/example.component.html and reproduce the ion-datetime wheel behavior with the font size changed from 22px to 27px. Compare the behavior in Ionic 8.2.5 with Ionic 7.8.6; done means the wheel remains selectable under scaled Android WebView fonts without the regression described.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
android, angular, typescript
Ambito
frontend, mobile
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
48/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.