Hello,
I’m having a weird problem. The first time I open a page, it displays properly like this:
But if I go back and then come to the same page, it displays like this:
This is my CSS code:
.scroll-content {
overflow: hidden;
}
.circ {
position: relative;
margin: 0;
}
.circ::before {
position: absolute;
content: '';
top: 0;
bottom: 0;
width: 100%;
background: url(../assets/images/Dante_dmc_2010.jpg) no-repeat;
background-size: contain;
opacity: 0.5;
}
.circ img {
max-width: 100%;
height: auto;
display: block;
clip-path: circle(25% at 50% 33%);
min-height: -webkit-fill-available;
}
This is the template:
<ion-header>
<ion-navbar>
<ion-title>player-screen</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="circ">
<img [src]="'assets/images/Dante_dmc_2010.jpg'">
</div>
</ion-content>
<ion-footer>
<ion-grid>
<ion-row>
<ion-col>
<button ion-button icon-only outline>
<ion-icon name="skip-backward"></ion-icon>
</button>
</ion-col>
<ion-col>
<button ion-button icon-only>
<ion-icon name="pause"></ion-icon>
</button>
</ion-col>
<ion-col>
<button ion-button icon-only (click)="playAudio()">
<ion-icon name="play"></ion-icon>
</button>
</ion-col>
<ion-col>
<button ion-button icon-only>
<ion-icon name="skip-forward"></ion-icon>
</button>
</ion-col>
<ion-col>
<button ion-button icon-only>
<ion-icon name="repeat"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
It is as if the top property in .circ::before changes to top: -35px (approx.)
If I kill the app and open it again the page appears normal for the first time and then the same thing happens if I go back and open it again.
Any ideas what might be causing the problem?