How to fix image hanging on iOS page transition?

I’m working on a welcome screen that routes to a login screen. As part of my design, I’ve 2 images in an <ion-footer>. I’ve positioned the images the way I’d like using CSS, and it seems to look fine on Chrome DevTools. However, when I navigate from the welcome screen to login screen, the right footer image seems to freeze momentarily during the page transition. This issue doesn’t seem to be present on Android.

Here’s my Ionic info (note: ionic info says my version is 5.7.0 but my package.json says "@ionic/angular": "^5.5.2"):

Ionic:

   Ionic CLI                     : 6.17.1 (/Users/userName/.nvm/versions/node/v14.15.5/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.7.0
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.2.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Utility:

   cordova-res                          : 0.15.3
   native-run (update available: 1.4.1) : 1.3.0

System:

   NodeJS : v14.15.5 (/Users/userName/.nvm/versions/node/v14.15.5/bin/node)
   npm    : 7.17.0
   OS     : macOS Big Sur

Here’s a GIF showing the bug:

HTML for the welcome page:

<ion-content>
  <ion-grid>
    <ion-row class="ion-padding-top">
      <ion-col class="ion-text-center">
        <ion-button size="default" routerLink="/auth/login" class="authBtn">Sign In</ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="ion-text-center ion-no-padding">
        <ion-text>Don't have an account?
          <span class="signUp" routerLink="/auth/signup" routerDirection="forward">Sign Up</span>
        </ion-text>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

<ion-footer class="ion-no-border">
  <ion-grid class="ion-no-padding">
    <ion-row>
      <ion-col class="footerRight"></ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="footerLeft"></ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

(footer’s) SCSS for the welcome page (this is shared by the child login page):

.footerLeft {
  height: 15vh;
  background: url("/assets/img/footer-left.png") no-repeat;
  background-size: 40%;
  // background-position: top left;
}

.footerRight {
  height: 16.5vh;
  background: url("/assets/img/footer-right.png") no-repeat;
  background-size: 27.5%;
  background-position: right;
}

When I set background-position: left for .footerRight, the image doesn’t hang on page transition. Here’s a gif showing that:

However, this isn’t where I want to position the image.

How can I resolve this issue?

1 post - 1 participant

Read full topic