Very basic CSS animation lag

ionic-v1
1

I’m using some very basic animations and I’m having lag (on mobile devices) where the animation looks choppy.

First, I have this hack to enable GPU rendering in CSS by forcing a 3D rendering area. This is supposed to help with performance, but changes nothing.

.animation {
	-webkit-backface-visibility: hidden;
   	-moz-backface-visibility: hidden;
   	-ms-backface-visibility: hidden;
   	backface-visibility: hidden;

   	-webkit-perspective: 1000;
   	-moz-perspective: 1000;
   	-ms-perspective: 1000;
   	perspective: 1000;

   	-webkit-transform: translate3d(0, 0, 0);
   	-moz-transform: translate3d(0, 0, 0);
   	-ms-transform: translate3d(0, 0, 0);
   	transform: translate3d(0, 0, 0);
}

My animation is very, very simple:

.drop-in {
    animation: drop-in 1s forwards;
    -webkit-animation: drop-in 1s forwards;
}

@-webkit-keyframes drop-in {
	0% {
		top: -100%;
	}
	100% {
		top: 0;
	}
}

I have an iPhone 6s+ so I feel like it should be able to do this transition smoothly, also, the ionic-swipe-cards worked perfectly on my phone, so…?