[iOS] Strange Flickering issue, possibly when LoadingController is present


#1

Dear fellow ionic developers :slight_smile:

I am having one strange issue that just started to show up on one of application I am currently developing. For now this was reported by production users on iOS devices running latest iOS 11.2.6 (iPhone 8) and older 11.1.2 (iPhone SE). I cannot reproduce this issue on any of my devices, or simulators even running the same version of iOS.

What is going on exactly? I think the problem is connected to LoadingController.

When action requires I present LoadingController as specified in ionic documentation (nothing fancy). After some time LoadingController is dismissed. Several users that have reported this have strange flickering issue. Instead of animating loading controller there is by my personal opinion 4 or 5 flickers in each second LoadingController is presented.

Video that was sent by production user is attached here: https://www.dropbox.com/s/l9wxangsiuq1o2x/Flickering%20issue.MP4?dl=0

ionic info output is as follows:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.15.2
ionic (Ionic CLI) : 3.15.2

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.1.2 ios 4.3.1
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.1
Node              : v6.9.4
npm               : 3.10.10
OS                : macOS High Sierra
Xcode             : Xcode 9.2 Build version 9C40b

Environment Variables:

ANDROID_HOME : /Users/aleksandaradzic/Documents/AndroidSDK_LOCAL

Misc:

backend : pro

Not all components are on the latest versions because unsupported plugins.

This has just now been reported. We could not reproduce it on iOS or Android devices, but we have 2 users that are having this issue on iOS. Do you have any idea what can cause this and how I can sort it out?

PS: all builds are preparing for release with --production argument in build command.

Thanks for your help!
Aleksandar.


#2

Are you sure the loadingController just creates and presents one loading? It looks like there were created and presented many loadings, dismissing the previous before presenting the next.
Similar to this example:

import { Component } from '@angular/core';
import { Loading, LoadingController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      <button ion-button (click)="start()">Start</button>
    </ion-content>
  `
})
export class HomePage {

  constructor(private loadingController: LoadingController) {
  }

  start() {
    let loading: Loading;
    for (let i = 0; i < 10; i++) {
      setTimeout(() => {
        if (loading) {
          loading.dismiss();
        }
        loading = this.loadingController.create();
        loading.present();
      }, 1000);
    }
    setTimeout(() => loading.dismissAll(), 10000);
  }
}

#3

Hey thanks for your reply!

Unfortunately I do not think thats the case. Here is exact same flow, in my situation.

https://www.dropbox.com/s/hpbwbzoubvl2ew8/Non%20flickering%20example.MP4?dl=0

As you can see, loading controller comes after the first one is dismissed. I guess we would experience this in a lot more devices, but so far only 2 users are facing this issue.


#4

Does anybody else have any idea? :slight_smile: