bug: Ion-input text cutting from top on Specific Fonts.

[Saqib92]

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
• [ ] v6.x

Current Behavior

Using SansSerif font-family is not working as expected inside ion-input the text cutting from Top. if i change font it works fine but using this specific font i face issues. this is only happening on Android Devices not on Web and IOS.

Expected Behavior

Text inside ion-input should not cut from top.

Steps to Reproduce

https://freefontsdownload.net/free-sansserif-font-152028.htm Download Font from here and use it inside application.

Minimal Code: https://github.com/Saqib92/ionic-font-issue.git

Code Reproduction URL

https://github.com/Saqib92/ionic-font-issue.git

Ionic Info

Ionic:

   Ionic CLI                     : 6.17.0 (/Users/fahadaslam/.nvm/versions/node/v14.17.6/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.10
   @angular-devkit/build-angular : 12.0.5
   @angular-devkit/schematics    : 12.0.5
   @angular/cli                  : 12.0.5
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

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

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.5.0) : 1.4.1

System:

   NodeJS : v14.17.6 (/Users/fahadaslam/.nvm/versions/node/v14.17.6/bin/node)
   npm    : 7.24.0
   OS     : macOS Big Sur

Additional Information

Only Happening on Android Devices. Works Well on PWA (web), and IOS. Is there a way to Change fonts dynamically for ion-input only for android.

[liamdebeasi]

Thanks for the issue. Does this happen with any other font? The font you listed does not work on my machine (Font Book says the font file is corrupt).

[Saqib92]

I have made Github repo with Font added. You can Check it. Just Clone it.

[liamdebeasi]

What version of the Android WebView are you running? You can find this by logging window.navigator.userAgent in the console when inspecting the app running with Chrome dev tools.

[Saqib92]

Font working fine in: 'Mozilla/5.0 (Linux; Android 10; Android SDK built for arm64 Build/QSR1.210802.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/93.0.4577.82 Mobile Safari/537.36'

Font Issue in: 'Mozilla/5.0 (Linux; Android 9; Infinix X626B Build/PPR1.180610.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/94.0.4606.85 Mobile Safari/537.36'

Looks like Android Version issue if i am not wrong.

[liamdebeasi]

Thanks. I recommend filing an issue on the Chromium bug tracker as this appears to be Chromium related, not Ionic related: https://bugs.chromium.org/p/chromium/issues/list

I am not able to reproduce this in the app you provided at the moment. This is what I see on my end:

I am testing using Chrome 94.0.4606.85.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!