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


#1

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?


#2

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?


#3

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.


#4

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”.


#5

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


#6

I have this problem to! using latest beta


#7

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


#8

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


#9

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.


#10

I am also on beta6 btw.


#11

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.


#12

exact same behavior for me


#13

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


#14

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


#15

Thanks for the Codepen @mhartington!


#16

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


#17

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