bug: floating label is not centered in input on ios mode

[gugahoi]

Bug Report

Ionic version:

[x] react 4.11.0

Current behavior:
IonLabel is positioned incorrectly in iOS only. It seems IonLabel is far too low when used in an input box for iOS user agents. It is positioned correctly for Web and Android user agents however - refer to screenshots below.

Expected behavior:
iOS labels should be centered just like in the Web or Android version

Steps to reproduce:
Using the dark theme described in the documentation and trying to use floating labels. No other styling changes required.

Related code:

// Input.tsx
import React from 'react'
import { TextFieldTypes } from '@ionic/core'
import { IonInput, IonItem, IonLabel } from '@ionic/react'

type InputProps = {
    placeholder: string
    type?: TextFieldTypes
}

const Input = ({ placeholder, type = 'text' }: InputProps) => (
    <IonItem className='ion-margin-vertical'>
        <IonLabel position='floating'>{placeholder}</IonLabel>
        <IonInput type={type} />
    </IonItem>
)

export default Input

Using it like below

<form>
    <Input type='email' placeholder='Email Address' />
    <Input type='password' placeholder='Password' />
    <IonButton
        expand='block'
        onClick={submit}
        type='submit'
    >
        Sign In
    </IonButton>
</form>

Other information:

Screenshot with iOS user agent

It is quite easy to see how the Password label is misplaced (specially when comparing to the android screenshot), however when selecting the input box, the label floats correctly.

Screenshot with Android user agent

Ionic info:

> ionic info

Ionic:

   Ionic CLI       : 5.4.13 (/usr/local/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 4.11.7

Capacitor:

   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0

Utility:

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

System:

   NodeJS : v13.2.0 (/usr/local/Cellar/node/13.2.0/bin/node)
   npm    : 6.13.1
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the report. In Ionic 7 we will be introducing a new syntax for using form components such as ion-input. You can find a summary of the changes here: #25661

The reported issue is fixed with this new syntax. Work to update ion-input to use this new syntax has been completed, so I am going mark this issue as resolved. We plan to have a public beta period for Ionic 7 in the future. You can visit the Ionic Blog, Ionic Twitter, or our GitHub Releases Page to be notified when the Ionic 7 beta is released. Let me know if you have any questions. Thanks!

[ionitron-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.