Overflow-scroll="true" does not update scroll height


#1

Hi everyone.
In my main view I have top categories of products. When user clicks on it loads products inside category like this:

I have set overflow-scroll=“true” on ion-content. Everything works fine on iOS and Android 4.4 and above, but on android 4.1 is happening the following:

Initially scroll works fine, but when I expand the category I can not scroll to the bottom. Seems like scroll container height does not update. Here is the code:

<ion-content
delegate-handle="mainScroll"
class="products-container"
ng-class="{'has-footer' : cart.totalQtty && !hideHeaderFooter, 'has-header' : !hideHeaderFooter}"
on-touch="blurSearch()"
overflow-scroll="true"
>
<!-- overflow-scroll="true" --> 

<section ng-repeat="cat in storeProducts.products" id="cat-{{cat.category_id}}">
	<div class="cat-cover" ng-click="toggleCategory(cat)" ng-class="{ active: storeProducts.currentCat == cat.category_id }">
		<h1>{{::cat.category_name}}</h1>
		<div class="bg" style="background:url(http://nextmart.ae/assets/client/images/covers-app/{{::cat.slug}}-sm.jpg) center center"></div>
	</div>
	
	<div class="cat-products">
		<div ng-repeat="subcat in cat.subcats" class="subcat">
			<div class="item item-divider subcat-title" id="sub-{{subcat.category_id}}">
		    	{{::subcat.category_name}}
		    </div>
			<div class="container">
				<div class="product-item" ng-click="addToCart(subcat.products, $index)" ng-repeat="product in subcat.products track by $index">
					<center class="img-layout">
						<img onerror="$(this).remove()" class="product-img" ng-src="http://nextmart.ae/uploads/hashed/{{::product.hash}}.jpg">
					</center>
					<div class="product-info">
						<h1 class="product-price">{{::product.product_price}} AED</h1>
						<p class="product-desc"> {{::product.product_name}} <br> <i class="ion-ios-speedometer-outline"></i> {{::product.weigth}} </p>
					</div>
					<span class="qtty-bubble" ng-if="product.qtty" ng-click="removeFromCart(subcat.products, $index, $event)">
						<p>{{product.qtty}}</p>
						<i ng-class="(product.qtty==1) ? 'ion-ios-trash-outline' : 'ion-ios-arrow-down'" ></i>
					</span>
				</div>
			</div>
		</div>
	</div>
</section>

Sorry for my English. I hope, I could explain my problem. Please help me, I spent hours to fix this bug :(((((