Flickering effect during navigation on iPhone

Ionic Framework
1

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
2

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

1 Like
3

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

4

same code implementation and since i’m new to this framework i placed tabs at bottom and the navigated it by url. Output: the whole pages are flickering.

5

hi all,

have you guys solved the issue? I’m facing the same. :frowning:

6

hi prabhashi1,
i am adding below code in ion-content .scss file and it works for me.
try this

ion-content {
–color: #fff;
–background:none;
background: url(…/…/assets/imgs/bg.jpg) no-repeat 0 0;
background-size: cover;
}

1 Like
7

Was there any solutions for this, also seeing flickering.