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

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing 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

screen-20240715-201840.mp4

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):

screen-20240715-201418.mp4

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

Go to the linked highly rudimentary stackblitz demo
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)
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.

I am also getting this issue. Is there any suggestions on how we can get around this while we wait for a fix?

This bug makes the ion-datetime unusable for some users who user a larger text size on their device.

ion-datetime-font-scale-bug.mov

any idea to fix it or workaroud ?

Had the same issue using ion-picker in tablet:

#30299

Hello,

I'm encountering the same issue/behavior with the ion-picker.
I didn't have this with the PickerController (that I used before).

In my case, this happens when the user change the global font-size settings of the Android phone (Settings > Screen > Font and screen zoom).

Here is the render:

To reproduce it, this is simple:

Create Ionic project.
Add ion-picker with multiple items inside.
ionic cap run android --open
Install the app on phone or simulator.
Go to phone settings and change the font-size (bigger).
Open the app and scroll in the picker options to see the bug.

Hope this can help to identify and fix this.

Kind regards,
Loïc

Hi again,

One way to "fix" this is to force the textZoom of the webview at 100% and so don't apply changes related to user text settings:
File: MainActivity.java

import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    WebView webView = (WebView) this.bridge.getWebView();
    WebSettings webSettings = webView.getSettings();
    webSettings.setTextZoom(100); // ← Change automatic/user scalling.
  }
}

This is not very goof for accessibility because the settings will be skipped but this will ensure that the font-size defined in the code/styles will be used in the app/webview.

So, this one "solve" the issue related to the settings (not for custom styles with bigger font-size).

Kind regards,
Loïc

@OverRide

Hi again,

One way to "fix" this is to force the textZoom of the webview at 100% and so don't apply changes related to user text settings: File: MainActivity.java

import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends BridgeActivity {
@OverRide
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WebView webView = (WebView) this.bridge.getWebView();
WebSettings webSettings = webView.getSettings();
webSettings.setTextZoom(100); // ← Change automatic/user scalling.
}
}
This is not very goof for accessibility because the settings will be skipped but this will ensure that the font-size defined in the code/styles will be used in the app/webview.

So, this one "solve" the issue related to the settings (not for custom styles with bigger font-size).

Kind regards, Loïc

We tried this solution, and it did help. Thanks! However, after some testing, we decided not to completely disable text scaling from system settings. The wheel component only seems to break when the text size exceeds 120%. So, we now allow users to adjust the system font size but cap it at 120% if it's set higher than 1.2.

import com.getcapacitor.BridgeActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.content.res.Configuration;

public class MainActivity extends BridgeActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        registerPlugin(DownloadAndUnzipPlugin.class);
        super.onCreate(savedInstanceState);
        float fontScale = getResources().getConfiguration().fontScale;
        WebView webView = (WebView) this.bridge.getWebView();
        WebSettings webSettings = webView.getSettings();

        if (fontScale > 1.2) {
            webSettings.setTextZoom(120);
        }
    }
}

@amish1188

Hello @amish1188,

Ok, thanks for your feedback :)

Regards,
Loïc

Thank you for submitting the issue!

I was able to reproduce the issue on an Android device. The cause is that apps running in a WebView, like Ionic, follow Android's system-wide font scaling. So when the text size is increased through device settings, the ion-picker gets clipped. For now, a workaround is to set webSettings.setTextZoom(100) to prevent this scaling. The team will look into a solution in the mean time.

@thetaPC

Hello @thetaPC

~~Just to let you informed, the same issue occur on iPhone with IOS 16 (and older I suppose) but not in the earlier versions.~~

EDIT: This is not the same issue. On IOS, the problem is related to the event ionChange that does not fire.

This is exactly this issue. Unfortunately, this issue has been marked as "Closed" and "Not Planned" due to the fact that it occurs only on "old devices" (using IOS 16+) but actually, the version 8 of Ionic is supposed to support IOS 15+ and so, the picker should work as expected on IOS 16+. Is it possible to reconsider the status of the issue?

This is also related to this issue (open) so this is not necessary to re-open the other issue but maybe update it once the fix will be available.

Regards,
Loïc

It looks like this might have been fixed as of 8.7.4, at least incidentally.

@mjvotaw

Thanks for the report, and sorry for the delay. Thanks also to @mjvotaw for pointing out it might be fixed: you were right.

Verified on 9.0.8: the wheel no longer scrolls on its own with Android's font size turned up, in both ion-datetime and ion-picker. Android's text zoom was making each picker option row taller than the wheel expected, so every time the wheel tried to center the selected value it landed on the previous one and kept going until it reached the first option. #30563 changed the option markup so rows keep a fixed height at any text size, which fixed this in v8.7.4.

Update to 8.7.4 or later.
If you added webSettings.setTextZoom(100) or the 120% cap in MainActivity as a workaround, you can remove it after updating so your users get their font size setting back.

At very large font sizes the option text can still be clipped inside its row. That is tracked separately in #25964.

Closing this as fixed.

Navigation Menu

Repository navigation

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

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Activity

yasgreen93 commented on Nov 25, 2024

ebarolo commented on Jan 28, 2025

MikelMoli commented on Mar 25, 2025

loic-parent commented on May 12, 2025

loic-parent commented on May 12, 2025

amish1188 commented on May 19, 2025

loic-parent commented on May 19, 2025

thetaPC commented on May 20, 2025

loic-parent commented on Jun 2, 2025

mjvotaw commented on Aug 3, 2026

thetaPC commented on Oct 15, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions