Proper way to optimize CSS 3 animations for iOS/Mobile Safari?
You should at minimum add an empty translate3d declaration:
transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);This will help performance immensely on iOS, as demonstrated by Remy Sharp, because it causes iOS to use hardware-acceleration.
If you want to go further, refactor the animation to use a webkit translation transform, rather than animating the 'top' property. In the transform3d property, the second parameter is the Y value. In your example, change the -webkit-transition to focus on the transform property, rather than top. Then, set an initial webkit-transform of translate3d(0,0,0).
To perform your animation, change your class .modal.modalOn declaration to:
transform: translate3d(0,80px,0);-webkit-transform: translate3d(0,80px,0)This will cause iOS to animate the transform of the element, and should be even smoother, than the first method.
-- Note --Don't forget to add a unit of measurement like px or em — something like transform: translate3d(0,80,0); won't work.