ionic-team / ionic-team/ionic-framework
bug: Floating Label Not Vertically Centered in ion-input on iOS (fill="outline" mode="md")
- Ngôn ngữ chính
- TypeScript
- Star
- 52.7k
- Fork
- 13.3k
- Merge trung bình
- 1 ngày 15 giờ
- Pull request đã merge (30 ngày)
- 51
Mô tả
### 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:
`
`

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.
### 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_
Hướng dẫn đóng góp
Hướng nghiên cứu
Start with the ion-input component and the linked reproduction project, using label-placement="floating", fill="outline", and mode="md" on an iOS device or simulator. Compare the unfocused and focused label positions and verify that the floating label is vertically centered in both states.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend, mobile
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100