Ion-input floating label not centered vertically

Hi, thank you for helping!!

I found the issue, but ran into another (similar) one.

I originally placed the ion-input above nested inside of ion-card and ion-card-content like this because i liked the provided padding it gave:

    <ion-card>
      <ion-card-content>
        <ion-input
          label="Outline input"
          label-placement="floating"
          fill="outline"
          mode="md"
          placeholder="Enter text"
        ></ion-input>
      </ion-card-content>
    </ion-card>

This caused the Issues with the Colors

To achieve something similar without using ion-card / ion-card-content im now using a div with class ion-padding like this:

  <div class="ion-padding">
    <ion-input
      label="Outline input"
      label-placement="floating"
      fill="outline"
      mode="md"
      placeholder="Enter text"
    ></ion-input>
  </div>

This works fine, colors are fixed now but i ran into another issue:

To make the outlined inputs work you have to force mode=“md” as it says in the documentation

Filled inputs can be used on iOS by setting the input’s mode to md.

However, when i do that, the outline does work on IOS, but the (unfocused) label is not centered vertically

I can only reproduce this issue with a IOS Simulator (Web Version, not App) or Physical IOS Device, i cant reproduce it with the IOS Simulator provided by Firefox or Chrime Web Tools

I created a StackBlitz for it but i don’t think that really helps because you cant reproduce the issus there, you have to test it with IOS Simulator on Mac or Physical IOS Device

https://stackblitz.com/~/github.com/oskarkarol/test

Screenshot from IOS Simulator:

Screenshot from Firefox DevTools IOS Simulation (not reproducable)