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)