Collection repeat crash and wrong calculation on translate3d


#1

Hello, I am using collection repeat on android.

And I am encountering two problems.

The first one is the android app crash on Samsung Galaxy note 3 when I am scrolling too fast, e.g. large swipe.

I believe this one is easy to understand. I guess it cause by the infinite scroll.

The Second one is it has wrong calculation on y-axis on -webkit::translate3d(x, y, z)

This issue is a bit weird. It happen when I scroll back from the bottom. I saw the y-axis has 18px different of what I expect.
The height of the item in the screenshot should be 261px. But sometime, the translate will become translate3d(0, 243, 0). I have no ideas which part cause the error.

Here are my related code.

ProductList.html

    <ion-view title={{navTitle}}>


  <!-- The Filter bar -->
  <ion-content>

    <div class="button-bar item" style="padding:0px; height:47px;">
      <a class="button" style="height:44px;border-color:#EEEEEE;background-color:#FFFFFF;font-family:HelveticaNeue;font-size:9px;font-weight:bold;color:#006FBB" ng-click='triggerFilter("{{filterTitle}}")' ng-repeat="filterTitle in filtersTitles">{{toUppercase(filterTitle)}}</a>

    </div>

  </ion-content>


  <ion-content  style="margin-top:47px; height:{{getScrollViewHeight()}};" 
                
                has-header="true" 
                ng-show='activeFilterTitle == ""'
                delegate-handle="mainScroll">



    <div ng-show="screenReady" id="search-box" class="bar bar-header item-input-inset">
      <ion-search class="item-input-wrapper">
        <i class="icon ion-ios7-search placeholder-icon"></i>
        <input type="search" placeholder="Search" ng-model="data.searchQuery" ng-enter="searchEnter()"/>
        <i class="clear-search icon ion-ios7-close-empty" ng-click="clearSearch()"></i>
      </ion-search>
      <button class="button button-clear" ng-click="clearSearch()">
        Cancel
      </button>
    </div>


    <div class="list">
      <div  class="item"
            collection-repeat="product in productsData"
            collection-item-width="'50%'"
            collection-item-height="getItemHeight()"
            ng-click='productTap(product)'
            ui-sref='app.productDetail()'
            ng-style="{width: '50%', padding: '0px', height:getItemHeight()}" >
        <img style="width: 70%; margin: 15%;" href="#/app/playlists" src="{{product.images[0].mediumURL}}" />
        <div class="product-list-brand" >{{toUppercase(product.brand.name)}}</div>
        <br/>
        <div class="product-list-price" >${{product.price}} USD</div>
        <br/>
      </div>
    </div>
    <ion-infinite-scroll on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
  </ion-content>


  <ion-content style="top:91px;" class="has-header" ng-show='activeFilterTitle != ""'>
    <ion-list>

        <ion-item style="text-align:center;" ng-click='showIndex($index)' ng-repeat="filter in filterData">
          <span ng-if='filter.isPriceType == true'>{{filter.from}} and {{filter.to}}</span>
          <span ng-if='filter.isPriceType == false' style="font-family:HelveticaNeue;font-size:12px;font-color:#006FBB;">{{filter.terms}}</span>
        </ion-item>
    </ion-list>
  </ion-content>

</ion-view>

ProductListController.js

Get Item Height

  $scope.getItemHeight = function() {
    var halfScreenWidth = screen.width / 2.0;
    return halfScreenWidth * 1.35;
  };

Load More Products

 $scope.loadMore = function() {
    ploader.loadProductsWithCompleteBlock(function(error) {
      if (error != null && error != 990) {
        if (error == 991) {

          console.log('no more product');
        }else {
          alert('loading error ' + error);
        }
      }
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };