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

ppolce commented 2 years ago

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

ionic start choose Angular / Tabs application
edit tab1.page.html, comment out (or remove) the <app-explorer-container> line
add <ion-datetime></ion-datetime>
add android npm i @capacitor/android
build a testapp.apk
Install the apk on an android device that allows for very large fonts (in my case, Samsung Galaxy S21).
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] commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

npm install @ionic/angular@6.2.8-dev.11664221659.1dd1c3b9

ppolce commented 2 years ago

Hi,

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

Pablito203 commented 1 year ago

Hi @liamdebeasi,

Will this fix be merged into newer versions?

luqasmateus commented 1 year ago

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 commented 1 year ago

Any reason why this has not been merged yet?

liamdebeasi commented 1 year ago

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 commented 1 year ago

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

calender

liamdebeasi commented 1 year ago

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

Sampath-Lokuge commented 1 year ago

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 commented 8 months ago

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 ?

ionic-team / ionic-framework