Example of effects of translate3d
Why Stack Overflow recommends it
Stack Overflow users link it as visual proof that adding translate3d(0,0,0) makes CSS animations smoother on iOS and Mobile Safari.
Recommended by 3 people across 3 different months, 2011 to 2015.
What it is
A 44-second screen recording by Remy Sharp comparing two versions of the same CSS animation on iOS. One version is jumpy, the other uses translate3d and runs smoothly. It shows the effect of the hardware-acceleration hack side by side.
What people said
Recommends Benjamin Mayo · 2011-06 · Stack Overflow · on “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 [this video] , 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
Recommends Nicholas Evans · 2011-07 · Stack Overflow · on “Z-index on position fixed in webkit nightly”
I am ... sort of. I'm using `-webkit-transition: margin 0.3s linear;` and a change of the margin value to move these elements around. Strictly speaking this isn't a translation I suppose, but it does bring a marked performance enhancement believe it or not. See Remy sharp doing the same thing here [this video] and Paul Irish elaborating on the same clip here [LINK] (skip to 12mins in on the latter). As Paul says, it's a total hack, but it works. Thanks for following up!
Recommends Alvaro · 2013-06 · Stack Overflow · on “jquery animations make ipad hang”
CSS3 would be faster for animations than jQuery. [LINK] Safari is very powerful managing it and should work smother. If you want it to be compatible with other browsers which does not support CSS3, you could try to make use of jquery-animate-enhanced [LINK] or something similar [LINK] . Also, try to use CSS 3d transform for a better performance [this video] . (it will make use of hardware acceleration) Instead of: transform: translateZ(0); Use: transform: translate3d(0,0,0);
Cites Giuseppe · 2015-11 · Stack Overflow · on “Overflow: auto + translateZ prevent page scrolling”
On iOS devices, you can smooth it using: translate3d(0,0,0). It allows the browser to use iOS hardware acceleration. Idea found at Paul Irish's site [LINK] , and suggested by Remy Sharp (video) [this video] (yet not found at Remy Sharp's website [LINK] ):