Unexpected `ion-item` background color on iOS

Hi.

The following code…

Code

        <div id="container">
            <ion-grid>
                <ion-row>
                    <ion-col size-md="6" offset-md="3" size-lg="4" offset-lg="4">

                        <ion-card class="ion-padding-top ion-padding-bottom">
                            <ion-card-header>
                                <ion-card-title> Effettua l'accesso </ion-card-title>
                                <ion-card-subtitle> Inserisci i tuoi dati </ion-card-subtitle>
                            </ion-card-header>

                            <ion-card-content>
                                <ion-item>
                                    <ion-label position="floating"> Utente </ion-label>
                                    <ion-input v-model="user.auth_name" type="text" placeholder="Nome utente o email" clear-input></ion-input>
                                </ion-item>

                                <ion-item>
                                    <ion-label position="floating"> Password </ion-label>
                                    <ion-input v-model="user.auth_password" type="password" placeholder="" clear-input></ion-input>
                                </ion-item>
                            </ion-card-content>

                            <ion-card-content>
                                <ion-button @click="userSignin" color="primary"> Accedi </ion-button>
                            </ion-card-content>

                            <ion-card-content>
                                <p> Hai dimenticato i dati? Recuperali adesso. </p>
                            </ion-card-content>
                        </ion-card>

                    </ion-col>
                </ion-row>
            </ion-grid>
        </div>

…generates this result on my Mac:

Mac

iPhone 12 mini

But on my iPhone 12 mini (hardware, no virtual device) I got this:

Can you see the background under the sign-in fields?
It’s visible only on my “physical” phone, instead it isn’t on the iPhone 12 mini (virtual device) on Xcode.

Questions

  1. Why is it visible on my phone?
  2. How should I remove it “properly”?

Thank you,
Niccolò

I don’t know whether this will impact your question about the background color or not, but I’m seeing several Ionic elements outside of what I would consider their comfort zones:

  • <ion-item>s are generally inside <ion-list>s.
  • <ion-card>s are for organizing collections of information for display in a summary mode - they aren’t arbitrary catch-all elements suitable for laying out a login form
  • I don’t see the purpose of the <ion-grid> here (well, frankly, anywhere, but that’s a separate discussion). If all you’re trying to do is center the form in the viewport, that can be done just using flexbox.

So, if we get rid of the card, either get rid of the items or wrap them within an <ion-list>, and lay the form out with ordinary CSS instead of a one-element “grid”, do we still have the issue with the background colors, or does it magically go away?