Performance issues on iOs with css animations - ios

Question

I have a html page containing a div that is moving in when clicking on a button by using css transition on the bottom attribute. (change of bottom value is done by jQuery) This is working fine in all browsers (including iOS on iPad). Now I am developing a second page that has to do the same thing. I copied all css properties and the jQuery function but there is always a choppy animation on iOS (only on iOS!!) when the div moves in.
I already tried solutions like:
-webkit-transform: translate3d(0, 0, 0);
or
-webkit-transform: translateZ(0);
Nothing makes the animation be smooth like in the other page where I (as I think) completely have the same code.
Now I have no idea why there is a difference and how I can solve this. Did anyone already have some similar trouble and can give me some helpful advices for that?
Full code CSS:
.animationTestObject {
width: 100px;
height: 100px;
background-color: black;
position: fixed;
left: 100px;
bottom: -100px;
transition: bottom 500ms;
-webkit-transition: bottom 500ms;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
JS:
function startAnimation() {
$(".animationTestObject").css('bottom', '100px');
}

Answer 1

To get a better performance while animating, try to avoid the css properties that trigger a relayout (those marked with a purple tag).
In your case, you should animate the transform: translate property like so:
.animationTestObject {
width: 100px;
height: 100px;
position: fixed;
left: 100px;
bottom: -100px;
transition: transform 500ms ease;
transform: translate3d(0, 0, 0);
}
function startAnimation() {
$('.animationTestObject').css('transform', 'translate(0, -100px)');
}