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() {

  toRegister() {

  ngOnInit() {}


<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...
    <div class="welcome__btns-container">
        class="btn-light btn-mb"
        Sign in
        >Sign up</ion-button

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.

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.

hi all,

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

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

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