CSS not loading properly

@rajatkhare wrote:

Hello,

I’m having a weird problem. The first time I open a page, it displays properly like this:

first time.PNG427x660 313 KB

But if I go back and then come to the same page, it displays like this:

second time.PNG454x695 314 KB

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?

Posts: 1

Participants: 1

Read full topic