bug: Filled Input changing the centered vertically of label when switch font-family css

[WillxRv]

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

v7.x

Current Behavior

When changing the css font-family of an filled input the label does not remain centered vertically

Expected Behavior

When changing the font, the label remains vertically centered

Steps to Reproduce

1. Create a filled input
2. Change css font-family (example: "font-family: 'Nunito', 'sans-serif'")

Code Reproduction URL

https://stackblitz.com/edit/ionic7-label-test-umsdff?file=src%2Fapp%2Fapp.component.html

Ionic Info

Ionic:

Ionic CLI : 6.20.3 (C:\Users\Usuario\AppData\Roaming\npm\node_modules\@ionic\cli) Ionic Framework : not installed @angular-devkit/build-angular : 17.3.0 @angular-devkit/schematics : 17.3.0 @angular/cli : 17.3.0 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.7.3 @capacitor/android : not installed @capacitor/core : 5.7.3 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v18.18.2 (C:\Program Files\nodejs\node.exe) npm : 9.8.1 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. What browser are you testing this on? I'm not able to reproduce this on Safari or Chrome.

[WillxRv]

Thanks for response.

I'm ussing Chrome, version 122.0.6261.129, but this issue also occurs after compiling with capacitor and in Stackblitz

[liamdebeasi]

I can reproduce this using other font families such as "Comic Sans MS" instead of the "Nunito" font. This looks to be the same underlying problem as https://github.com/ionic-team/ionic-framework/issues/27194. The reference issue is changing the font size, but the root issue appears to be that our "center positioning" logic is not very reliable with custom scenarios. I am going to merge the two threads, but let me know if you have questions.

[WillxRv]

I can reproduce this using other font families such as "Comic Sans MS" instead of the "Nunito" font. This looks to be the same underlying problem as #27194. The reference issue is changing the font size, but the root issue appears to be that our "center positioning" logic is not very reliable with custom scenarios. I am going to merge the two threads, but let me know if you have questions.

Can you tell me if this will be or has already been fixed? Thanks

[liamdebeasi]

The issue has not been fixed yet. You can follow https://github.com/ionic-team/ionic-framework/issues/27194 for updates on this issue.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.