I saw several topics about this one with no answers.
I would like to display an element on top between the toolbar and the content. It works fine on Android and browser, but on iOS, the element is displayed under the toolbar. I’m guessing it’s because of z-index not rendering correctly on iOS.
the code:
<ion-header no-border>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="start" name="arrow-back" color="secondary"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title color="secondary">title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen="true" slot="fixed">
<div class="card">
<div class="headerContent">
<div class="avatar">
<img src="../../assets/girl.png">
</div>
</div>
</div>
</ion-content>
ion-toolbar {
--background: url('../../assets/background.png') no-repeat center center / cover;
min-height: 226px;
position: absolute;
}
ion-content {
position: relative;
height: 100%;
width: 100%;
}
ion-title {
text-align: center;
font-size: 25px;
font-family: "FuturaBT";
//margin-right: 46px;
}
ion-back-button {
--icon-margin-start: 10px;
--min-height: 14px;
--min-width: 17px;
--icon-font-weight: 0.5px;
}
.card {
margin: 0 auto;
z-index: -1;
.headerContent {
height: 226px;
.avatar {
width: 130px;
height: 130px;
position: relative;
margin: 0 auto;
img {
display: block;
border-radius: 50%;
position: absolute;
margin-top: 150px;
border: 1px solid #ffffff;
z-index: 100;
}
}
}
}