bug: ion-datetime date and time pickers do not render correctly on (some) devices with maximum font size set

[ppolce]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [X] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

Date and Time pickers do not render correctly on Samsung Galaxy S21 when the font size is set to largest. Labels overlap and make the text unreadable.

NOTE: It only seem to affect some android phones (e.g. Galaxy S21).

Expected Behavior

Rows should not overlap. Text should be visible at any font size setting.

Steps to Reproduce

1. ionic start choose Angular / Tabs application
2. edit tab1.page.html, comment out (or remove) the <app-explorer-container> line
3. add <ion-datetime></ion-datetime>
4. add android npm i @capacitor/android
5. build a testapp.apk
6. Install the apk on an android device that allows for very large fonts (in my case, Samsung Galaxy S21).
7. Open settings and choose the largest font size available

Run the app. A page with the current month's calendar appears. Click on the date picker, you’ll see that the months overlap:

and

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.20.1 (/home/develop/.local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.9.4
   @angular-devkit/build-angular : 13.3.9
   @angular-devkit/schematics    : 13.3.9
   @angular/cli                  : 13.3.9
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.2.0
   @capacitor/android : 4.2.0
   @capacitor/core    : 4.2.0
   @capacitor/ios     : 4.2.0

Utility:

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

System:

   NodeJS : v14.20.0 (/usr/bin/node)
   npm    : 7.24.2
   OS     : Linux 5.15

Additional Information

same as reported here: https://forum.ionicframework.com/t/ion-datetime-date-and-time-pickers-do-not-render-correctly-on-devices-with-high-accessibility-settings/225750

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ppolce]

Hi @liamdebeasi,

I have created a little app that's just the ionic "blank app" with a ion-datetime component on the homepage. You can find it here: https://github.com/ppolce/ion-datetime-bug

Thanks a lot for your help! P

[liamdebeasi]

Here is a dev build with a proposed fix if you are interested in testing it:

npm install @ionic/[email protected]

[ppolce]

Hi,

Tested it. It works as expected. Thanks a lot! P

[Pablito203]

Hi @liamdebeasi,

Will this fix be merged into newer versions?

[luqasmateus]

Hello @liamdebeasi

I can't update my apps to the latest @ionic/angular version because of this bug. Can you take a look at this again, please? The dev build you provided works correctly.

[Sampath-Lokuge]

Any reason why this has not been merged yet?

[liamdebeasi]

The proposed patch regressed selection behavior, so we are unable to merge the fix in its current state. We'll need to investigate an alternative fix in the future.

[Sampath-Lokuge]

Hmm...

Do you know how to solve this issue then? i.e. I cannot see full dates here. Thanks!

This didn't help me:

<ion-popover
     trigger="end-date-picker"
     show-backdrop="false"
     side="top"
     alignment="start"
   >

[liamdebeasi]

See https://github.com/ionic-team/ionic-framework/issues/24780 This is a known bug.

[Sampath-Lokuge]

Yes, it is disappointing. If you can provide the CSS changes like paddings and etc within calendar dates then we can acquire more vertical spaces within the calendar. Now it has a lot of paddings in between date rows. But we cannot change that due to the shadow dom effect.

[DevForAll-Loic]

The proposed patch regressed selection behavior, so we are unable to merge the fix in its current state. We'll need to investigate an alternative fix in the future.

Hey, my company is asking if there is any news ?