Flickering effect during navigation on iPhone

I have no idea why this is happening, but when I run my app on my iPhone using the DevApp I found a flickering effect during the transition of the navigation animation. I tested it on Android and there’s no flickering effect, neither on the browser.

As for now I only have 3 routes: welcome, login and register. In my welcome screen I have to buttons to navigate either to login or register, here’s how my welcome.ts look like:

export class WelcomePage implements OnInit {
  constructor(private navCtrl: NavController) {}

  toLogin() {
    this.navCtrl.navigateForward("/login");
  }

  toRegister() {
    this.navCtrl.navigateForward("/register");
  }

  ngOnInit() {}
}

welcome.html

<ion-content class="welcome">
  <div class="welcome__container">
    <img class="welcome__logo" src="../../../assets/img/meet-logo.png" />
    <p class="welcome__text">
      Some text goes here...
    </p>
    <div class="welcome__btns-container">
      <ion-button
        expand="block"
        shape="round"
        class="btn-light btn-mb"
        (click)="toLogin()"
      >
        Sign in
      </ion-button>
      <ion-button
        expand="block"
        shape="round"
        class="btn-gradient"
        (click)="toRegister()"
        >Sign up</ion-button
      >
    </div>
  </div>
</ion-content>

Both my login and register pages are not loading any data, they are basically forms. Any help with this issue is greatly appreciated, I have no idea what might be causing this effect on iPhone only. Thanks in advance.

1 Like

I posted a demo on GitHub in case anyone is willing to help https://github.com/Gilbert1391/ionic-demo

1 Like

Did you ever figure this out? I’m experiencing the same issue with the latest version of Ionic.