Ionic-framework: strange flashing under [at least] two distinct circumstances

[MattDHill]

Short description of the problem:

This is new behavior since the update to beta8.

1. Screen "flashes" just prior to pushing to another view. This happens if and only if (1) selecting from a list element in the current component that exceeds the viewable screen area (thus enabling scroll content), and (2) the target component depends on multiple providers that have dependencies of their own. (See demo).
2. Screen also "flashes" just prior to presenting an ActionSheet. This happens if and only if: selecting from a list element that exceeds the viewable screen area (thus enabling scroll content).

What behavior are you expecting? There should be no flash.

Steps to reproduce:

1. Check out this repo: https://github.com/MattDHill/listFlash
2. Run "ionic emulate iOS"
3. Click list item in "nav" tab to see navigation flashing.
4. Click list item in "action" tab to see action sheet flashing.

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

It has been very difficult to pin down this bug. I still am not quite certain what exactly is causing the flashing during navigation. To reproduce, the list must definitely exceed the viewable screen area, but it's tough to nail down the second part. I _think_ it happens when the target view depends on multiple providers that _also_ depend on providers.

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Ionic Framework Version: 2.0.0-beta.8
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[jgw96]

Hello, thanks for opening an issue with us! Does this only happen on ios, or on chrome and android too? Thanks for using Ionic!

[MattDHill]

Hi! I'm not sure if this happens on Andoid emulator or device as I don't have the ability to test that atm. But it works fine in the browser, both Chrome and Safari.

[F1ow]

Having the same issue on ios but on Android works for me.

[jgw96]

Note: after some testing this seems to be isolated to ios. I cant seem to reproduce on any of my Android devices.

[danbucholtz]

Hi @MattDHill,

I'm not sure what I'm supposed to be seeing, but here's how it looks on my iPhone.

https://drive.google.com/open?id=0B7Xofj71-_MbM0dONFA3ZUlLcFE

ActionSheet opening looks correct as well. Note: I did comment out your getLocation function so it looks like this:

getLocation() {
    /*let loading = Loading.create({
      content: 'Loading...'
    });
    this.nav.present(loading);

    this.locationService.getLocation()
      .subscribe(
        data => {
          this.location = data.location
        },
        err => {
          loading.dismiss()
          console.warn(err)
          alert("Error. Please try again later.")
        },
        () => {
          loading.dismiss()
        }
      );
      */
  }

Please try with beta 9 and make a video/gif of what you're seeing if the issue still exists. I'll re-open and address if needed at that point.

Thanks,
Dan

[danbucholtz]

I do see the ActionSheet flashing issue with UIWebView via Cordova. I don't see it in Safari (WKWebView) so that's good news. I don't see the Nav flashing issue in either. I'll get started on the action sheet issue for now.

[MattDHill]

Hi, thanks for the followup. I have upgraded to Beta 9 and am still experiencing the flashing for (1) the list items (2) the action sheet and also (3) the ion-select component. This only happens on iOS emulator or actual device.

Here is a clip of the flashing when clicking on a list item. This is the _exact_ same code as before, just with Beta 9 installed.
https://drive.google.com/file/d/0ByUf-mXWw8KcdUFUcFotWmhub2c/view?usp=sharing

I assume the flashing in all three scenarios have the same underlying cause, so solving one will likely solve them all. Thanks again.

[danbucholtz]

Hi @MattDHill,

Okay cool, I will take a look again. I must have been doing something differently than you are in the video.

Thanks,
Dan

[F1ow]

Hi @MattDHill this occurs only if the viewport can scroll!

[jgw96]

This seems to be related: https://github.com/driftyco/ionic/issues/6943

[jgw96]

Hello @MattDHill, can you reproduce this with a blank starter with scrolling content? I have been doing some testing on this and, unfortunately, can't seem to reproduce on my iphone 5 or any of my Android devices.

[danbucholtz]

I can definitely reproduce this, @jgw96. At least I could in beta 8-9ish.

Thanks,
Dan

[F1ow]

Hi, here we go - follow the readme.
https://github.com/F1ow/ionic-alert-flicker

happens only on ios devices in my case

On Jun 27, 2016, at 6:27 PM, Justin Willis [email protected] wrote:

Hello @MattDHill can you reproduce this with a blank starter with scrolling content? I have been doing some testing on this and cant seem to reproduce on my iphone 5 or any of my Android devices.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[jgw96]

Hello all! I just did some testing with our latest beta and am glad to report that i only see flashing with the action-sheet component now. I will be closing this issue and opening a new issue focused on the action sheet. I will link that new issue to this issue so that you guys can follow it. Thanks for using Ionic everyone!

[F1ow]

Hi @jgw96 unfortunately I still have this issue with beta.10! Select and Alert component flicker.

Have a look at my updated example: https://github.com/F1ow/ionic-alert-flicker

[jgw96]

@F1ow hmm i will definitely take another look at this. I am going to be testing an overlay component presentation refactor today that has the potential to fix this issue. I will get back to you with my findings. Thanks!

[jgw96]

@F1ow alright, so after testing that overlay component refactor, i can confirm that this is fixed for good now. I will see if we can get a nightly release out with some directions on how to use the refactored overlay component api's soon so that you can try yourself. Thanks for being patient with me on this!

[MattDHill]

@jgw96 this flashing suddenly just reappeared on iOS after updating to iOS 10. Action menus, navigating, even clicking a toggle. Please reopen.

[MattDHill]

Hey guys. @jgw96, @danbucholtz. Any update on this? The flashing is still happening after upgrading to rc0. Happens for (at least) alerts, action menus, and page navigation. Can you confirm you are seeing this as well?

[Chuckv01]

I am getting this too. I am seeing it happen when alerts are shown on RC0. Seems to happen 50% of the time on iOS devices.

[MattDHill]

Hey everyone, it would be great to see this in the RC1 milestones.

[danbucholtz]

@MattDHill, can you reproduce in RC0?

EDIT: Sorry, just saw your post now.

[MattDHill]

@danbucholtz sure thing. Here is a repo demonstrating the issue when presenting both loading and alert components. But it also happens with action menus. This re-appreared after the iOS 10 update. Thanks for your help.

https://github.com/MattDHill/ScreenBlink

[danbucholtz]

@MattDHill, Not sure if this will be RC 1 but I just showed the team videos of the flashing and we agree it is something we need to resolve ASAP.

Thanks,
Dan

[MattDHill]

Ok thanks. I'll keep my fingers crossed. While this is not a functional issue, it does make some basic actions look very amateur. You guys are awesome.

[manucorporat]

In the meantime, workaround:

IonicModule.forRoot(MyApp,  {
  canDisableScroll: false
});

add canDisableScroll: false to the ionic config

[MattDHill]

Thanks @manucorporat!

[manucorporat]

This should be fixed in next release RC2! Please feel free to reopen if the problem persist

[zefrench]

Thanks @manucorporat!