CSS animation generates 'extra height' on Mobile

So I've got a weird one here - took me nearly a day to figure out what was causing the issue, now I'm looking for some help with how to fix it.

I'm building a hybrid app (ionic/angular/cordova) and I'm using the following CSS for animation between views:

.fade-in-out.ng-enter, .fade-in-out .ng-enter {
    -webkit-animation: slideInUp 0.3s;
    -moz-animation: slideInUp 0.3s;
    animation: slideInUp 0.3s;
}

This works fine on web browsers however once installed on devices there is an issue. All my views are locked for scrolling/bouncing to get an app feel. After the first transition from main screen to any other screen and back to main screen, the height of my main screen get's 'doubled' - so the screen looks like it did but is now scrollable with nothing but the background color for the 'additional' height of the view. Inspecting the page on device shows correct height for all elements. Also the 'extra' height is kinda outside of HTML - inspecting each element will not highlight that 'extra' height.

Removing the animation removes the problem. Maybe someone saw something like this before?

Thanks!