Collection-repeat: list briefly flickers when tapping on an element to navigate to detail view

ionic-v1
1

Noticed on iPhone 4s / iOS 7.1 with Safari and Ludei CocoonJS’ WebView.

How to reproduce on an existing collection-repeat list:

List populates
Tapping on element to show detail view
Tapping on Back link
Moving 3-4 screen heights down
Tapping on element to show detail view
List briefly disappears for a couple of milliseconds while the transition to the detail view starts

Anyone else having this issue?

2

Can you give this a try with the nightly builds? A lot of work has been done since beta 3 last week :smile:

3

Just gave build 1972 a try, doesn’t make a difference (still able to reproduce the flicker). But I noticed the scrollPosition of collection-repeat is now working properly. Yay!

4

Awesome, I’ll forward this to one of the devs and see their take on it. Can you package up your app or point us to a link so we can exactly reproduce this?

5

The app contains some NDA specific mockups so I can’t share it entirely, but it’s quite simple to reproduce:

  • Controller:

    .controller(‘longListCtrl’, function($scope, $http, $ionicLoading, $timeout, myCache) {
    $scope.items = [];
    if( myCache.get(‘photoItems’) === undefined) {
    $http.get(‘http://jsonplaceholder.typicode.com/photos’)
    .success(function(data) {
    $scope.items = data;
    myCache.put(‘photoItems’, $scope.items);
    })
    .error(function(data) {
    alert(“Error loading data.”);
    });
    console.log(‘refreshing data’)
    }
    else {
    $scope.items = myCache.get(‘photoItems’);
    console.log(‘using cached data’);
    }
    })
  • Service:
.factory('myCache', function ($cacheFactory) { return $cacheFactory('myCache', function ($cacheFactory) { return $cacheFactory('myCache'); }); });

I display all the 5000 items provided by the datasource to test sort of an edge case scenario and performance in multiple native app containers.

I added a fixed height for each element (90px) and some CSS:

.my-item { left: 0; right: 0; .image-thumbnail-left { width: 30px; height: 30px; } }

Can you use this info?

ed. Uh, the editor option for pre formatted text is kinda wonky. :stuck_out_tongue: