CSS not loading properly


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:




 <div class="circ">
  <img [src]="'assets/images/Dante_dmc_2010.jpg'">

        <button ion-button icon-only outline>
          <ion-icon name="skip-backward"></ion-icon>
        <button ion-button icon-only>
          <ion-icon name="pause"></ion-icon>
        <button ion-button icon-only (click)="playAudio()">
          <ion-icon name="play"></ion-icon>
        <button ion-button icon-only>
          <ion-icon name="skip-forward"></ion-icon>
        <button ion-button icon-only>
          <ion-icon name="repeat"></ion-icon>

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?