Z-index doesn't word in ion-card on iphones

I have a problem with z-index property on iphone
The ion-card component should overlap the ion-header, as it has margin-top: -20px and z-index: 100 and that works on android, but on iphone it doesn’t
apparently on iphone the z-index property of the ion-car is not being respected

-------------html page
<app-header ></app-header>

<ion-content class="my-card">
	<ion-card> </ion-card>
</ion-content >

-------------css ion-card----
.my-card {
	--ion-background-color: #ffffff;

	ion-card {
		--ion-background-color: var(--ion-color-light);

		z-index: 100 !important;
		margin-top: -20px;
		padding-top: 0px;
		padding-bottom: 5px;
		margin-bottom: 45px;
	}
 }
		
-------------ion-header in component

<ion-header [translucent]="true" class="my-header">
  <ion-toolbar color="primary">
    <ion-title>
      <h2></h2>
      <h4></h4>
    </ion-title>
    <ion-buttons >
     
    </ion-buttons>
  </ion-toolbar>
</ion-header>

----------css ion-header
.my-header {

  ion-toolbar {
    --min-height: 100px !important;

    ion-title {
      padding-inline-start: 30px;
      -webkit-padding-start: 30px;

      padding-inline-end: 30px;
      -webkit-padding-end: 30px;

      h1,
      h2 {
        font-size: 22px;
        margin-top: 0;
        margin-bottom: 0;
      }

      h4 {
        font-size: 16px;
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }
}

1 post - 1 participant

Read full topic