Skip to Main Content

Speedy, Glitch-free CSS Transitions on iOS

I was having problems with glitching/stuttering when animating in iOS. Code such as this was causing a problem, with the content glitching (disappearing for one frame) regularly:

.foo {
    -webkit-transition: -webkit-transform .3s ease-out;
}
.foo:hover {
    -webkit-transform: translateX(400px);
}

CSS transitions are hardware accelerated on iOS - perhaps there’s a bug in there somewhere. In any case, the simplest style I’ve found to fix this is the following:

.foo {
    -webkit-transform: translateZ(0);
}

This gets rid of all the glitching, similar to other fixes (e.g. -webkit-backface-visibility and -webkit-perspective) I’ve seen thrown out as solutions around the Internet, but does it using a single property, one which will validate as CSS3 (well, CSS3 with vendor prefixes).