Hello,
I want my ion-refresher to be inside a subcontainer.
Because I have a image used as background but is in div with position absolute because I can’t add filter and the edit I want with a background-image.
The problem is that when I try to refresh my app. Even if it’s inside the subcontent it add a block in top of the image I used as a background.
Here is my code:
<ion-content>
<img class="lastpic" src="{{user.lastpic}}">
<div class="subcontent">
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content refreshingSpinner="dots"></ion-refresher-content>
</ion-refresher>
<div class="header">
<div>
<img class="profilpic" src="{{user.profilepic}}">
</div>
</div>
</div>
</ion-content>
.lastpic {
position: absolute;
z-index: 1;
mask-image: linear-gradient(to bottom, rgba(var(--ion-color-dark-rgb, 14,21,27),1) 0%, rgba(var(--ion-color-dark-rgb, 14,21,27),0) 75%);
opacity: 0.7;
}
.subcontent {
position: absolute;
z-index: 2;
.header {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(60px, auto);
box-sizing: border-box;
padding: 10px;
align-items: center;
text-align: center;
img.profilpic {
width: 100px;
border-radius: 100%;
}
}
}