Ionic-slide-box with images acting weird

ionic-v1
1

I’ve got a pretty basic slide-box to display images:

<ion-slide-box on-slide-changed="slideHasChanged($index)">
	<ion-slide ng-repeat="image in image>
		<div>
			<img ng-src="{{ image }}" class="my-class" />
		</div>
	</ion-slide>
</ion-slide-box>

$scope.slideHasChanged = function($index) {
	$timeout( function() {
		$ionicSlideBoxDelegate.update();
	});
};

Sometimes when I try to slide I can see only the last image, though the slide pager do show that the images are moving. I figured out that it happens because on loading the images don’t have width, so the transforms of slide-box that should move the images are 0 also. I tried to add width parameter or style to the div but It didn’t help.

So I added the SlideHasChanged method. Now when I slide, the resize take place and the image is changing. But I still I see the last slide first when I open the page.

I tried to call $ionicSlideBoxDelegate.update after I get the images from server, of after ng-repeat finished. but It still doesn’t work on old devices, that’s mean I still got some kind of race-condition…

So, when can I use $ionicSlideBoxDelegate.update to be sure the resize will happen?

2

I’ve found out that the reason of this bug was ng-hide I used on ion-content.

I had problems with ng-hide/ng-show so I added the following to my css:

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

As suggested here, turns out that this was messing my slide-box.