Ion-datetime: date and time pickers do not render correctly on devices with high accessibility settings

Ionic v6.20.1

  1. ionic start choose Angular / Tabs application
  2. edit, 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

Now, open the app.
The calendar is visible:

However, if you now click on the date picker, you’ll see that the months overlap:

Same goes for the time-picker:

It seems that Samsung phones allow for bigger fonts compared to other androids.

On a Google Pixel 4 (android 10), you can see the same issue but it’s not nearly as bad:

The “g” in August and the “p” in September are clipped.

Do I need to do something extra to support accessibility? Some extra settings or css etc?
Has anyone else had this problem?


hi all,
has anyone bumped into the issue above?
any help would be greatly appreciated.