Collection repeat crash and wrong calculation on translate3d


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.


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

  <!-- The Filter bar -->

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



  <ion-content  style="margin-top:47px; height:{{getScrollViewHeight()}};" 
                ng-show='activeFilterTitle == ""'

    <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>
      <button class="button button-clear" ng-click="clearSearch()">

    <div class="list">
      <div  class="item"
            collection-repeat="product in productsData"
            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(}}</div>
        <div class="product-list-price" >${{product.price}} USD</div>
    <ion-infinite-scroll on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

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

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



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);