ionic-team / ionic-team/ionic-framework

bug: Floating Label Not Vertically Centered in ion-input on iOS (fill="outline" mode="md")

Abierto
#30,093 0 comentarios 3 reacciones 0 asignados Ver en GitHub
triage
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

I am experiencing an issue with the ion-input component when using the following configuration:

`

`

![bug](https://github.com/user-attachments/assets/27660422-ce80-4909-8838-f0e3aa4c050d)

While the floating label appears vertically centered in most cases, the label is not properly centered when unfocused on iOS devices (physical or simulator). Below are the details of the issue:

### Expected Behavior

The floating label should remain vertically centered when unfocused, as it does when focused.

Screenshot 2024-12-19 at 15 08 53

### Steps to Reproduce

Steps to Reproduce:

1. Use the configuration mentioned above in a project.
2. Test the UI on an iOS device or the IOS Simulator on Mac.
3. Observe the unfocused state of the floating label.

### Code Reproduction URL

https://github.com/oskarkarol/test

### Ionic Info

changeme@2940b37a-ebee-4200-8564-3f831c0695c0 ~/D/G/test (main)> ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module
'@capacitor/ios/package.json'

Require stack:
- /opt/homebrew/lib/node_modules/@ionic/cli/lib/project/index.js
- /opt/homebrew/lib/node_modules/@ionic/cli/lib/index.js
- /opt/homebrew/lib/node_modules/@ionic/cli/index.js
- /opt/homebrew/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module
'@capacitor/android/package.json'

Require stack:
- /opt/homebrew/lib/node_modules/@ionic/cli/lib/project/index.js
- /opt/homebrew/lib/node_modules/@ionic/cli/lib/index.js
- /opt/homebrew/lib/node_modules/@ionic/cli/index.js
- /opt/homebrew/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.2.0 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.1
@angular-devkit/build-angular : 19.0.6
@angular-devkit/schematics : 19.0.6
@angular/cli : 19.0.6
@ionic/angular-toolkit : 12.1.1

Capacitor:

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

Utility:

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

System:

NodeJS : v22.12.0 (/opt/homebrew/Cellar/node@22/22.12.0/bin/node)
npm : 10.9.0
OS : macOS Unknown

changeme@2940b37a-ebee-4200-8564-3f831c0695c0 ~/D/G/test (main)>

### Additional Information

_No response_

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.