"White flash" when navigating on collection-repeat items (iOS)

Hi there,

First of all, congratulations for Ionic. I played with it the last few days and that’s a really awesome framework! I have build a classic app with tabs and a list in the first one. Navigation was slow when going back to the list due to many pictures but that was before you announced “collection-repeat” stuff. Amazing stuff! The navigation is really fluid now and going back to the collection is at least 3x faster than with the ng-repeat!

But a graphic problem appeared with the “collection-repeat” on iOS (emulator & device). It’s really strange… When I’m going to an element of my collection for the first time, everything works perfectly. The child view loads in the “tab-home”, replacing my parent collection. I can go back to the parent, the controller reloads the data and my scrollbar is still where I left it, perfect.

But when I relaunch this process, touching the same element or another, the view containing the collection displays a fast white screen (view seems empty for ~500ms then the collection is back), then the right-to-left animation displays the child view. Once I went to a child view, bug is always present. On Android 4.1.1, there is no “white flash” because the parent view stays white while playing the transition.

Clarification that may be important: the bug is never present when clicking on the 2 first items of the collection. Maybe because these 2 elements are visible at launch and loaded differently?

Can you help me trying to find out the problem please?

1 Like

Hmm, can tell me what version of ionic you are using? Also what version of ios?

If you can, could you post a demo of your collection repeat?

Collection-repeat is a feature of v1.0.0-beta.4. I’m using this one, nightly produces the same bug. I will try to post a codepen later.

Removing the “slide-left-right” animation on the nav-view seems to remove the bug. “slide-right-left” animation suffers from this bug too but “fade-in” doesn’t.

<ion-nav-view animation="slide-left-right"></ion-nav-view>

to

<ion-nav-view></ion-nav-view>

This hides the problem but the transition would give a better native feeling if working as expected. Again, I don’t have this bug with a classic list (ng-repeat), only using the new “collection-repeat”.

Reviving this: also seeing this in my project. Was this ever fixed?

I have this problem to! using latest beta

@coen_warmer and @tobbe are you guys using the nightlies? I can’t seem to reproduce it here.

nope, not nighly - beta6. It doesnt happen in the browser, only on a device (havent tried in a simulator) @mhartington

I can confirm it happens on device and in simulator.

Trying now to see if this has anything to do with animation attribute settings on body, ion-nav-view or ion-nav-bar.

I am also on beta6 btw.

Ok, just checked: doesn’t matter if animation attribute is set to body or on ion-nav-view. Flash only occurs when going to a detail page, not when returning to the list.

Happens on beta6 and the nightly.

Checking to see if this is already flagged as an issue on Github.

exact same behavior for me

Made a new issue: https://github.com/driftyco/ionic/issues/1595

2 Likes

Adding a link to the codepen for this. Good catch guys.

2 Likes

Thanks for the Codepen @mhartington!

I have the same problem in v1.0.0-rc.1

i’m seeing this in android now, on 1.0.0 stable…it only happens when switching tabbed states