<ion-slide-box> animation slows significantly under Android when each slide has a lot of conditional (ng-if, ng-class) markup

I have tested my ion-slide-box with very little content and increasingly added more conditional content to it. The more content I add, the slower the transition is (on Android).

I’ve tested this with the exact same controller, therefore the exact same data available to the view. The only thing that changes is the amount of ng-if and ng-class conditional markup in the view.

Also, the slow down behavior is very specific: when I touch, hold and start sliding, I can slide my finger left or right and as long as I’m still touching the screen (not releasing my finger), the animation is smooth. As soon as I release my finger, going in any direction, there is a slight pause, and then the animation continues smoothly.

What I don’t understand is why the additional markup is affecting the rendering, since the “next” slide (left or right) is already rendered when the current slide is rendered. As a matter of fact, I can actually slide the current slide all the way to one slide without ever releasing it and see the next slide almost entirely, and I can see that it’s already fully rendered.

Is there an event occurring when I release my finger that’s causing a check on the DOM or some other action that does not scale well with the additional conditional rendering? Is this something I can intercept and disable somehow?

Note: I would put a code sample together, but since this issue only happens with additional data and addtional markup, it would take a bit of time to put a standalone example together.


Hi @dbashizi i had the same issue in my app. I add two *ngIf and that made the slide go slow.