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

[JanPolasek]

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

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.

[yasgreen93]

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.

https://github.com/user-attachments/assets/335f6433-81e6-4431-b7a9-99fa62504101

[ebarolo]

any idea to fix it or workaroud ?

[MikelMoli]

Had the same issue using ion-picker in tablet:

https://github.com/ionic-team/ionic-framework/issues/30299

[loic-parent]

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:

1. Create Ionic project.
2. Add ion-picker with multiple items inside.
3. ionic cap run android --open
4. Install the app on phone or simulator.
5. Go to phone settings and change the font-size (bigger).
6. 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

[loic-parent]

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

[amish1188]

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);
        }
    }
}

[loic-parent]

Hello @amish1188,

Ok, thanks for your feedback :)

Regards, Loïc

[thetaPC]

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.

[loic-parent]

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