Simulating the behaviour of iOS apps trough CSS animations is one of the key points of frameworks such as jQuery Mobile, Sencha, etc. Indeed, both in Mobile Safari and inside a webView (for instance with PhoneGap), CSS animations are hardware accelerated so their performances are really good.
But while I was developing my own project, the Lottery roulette app, I faced some serious problems with transitions’ performances, so I decided to analyse them. As you are going to read, the transitions on the iOS platform could have some serious problems caused by custom Webkit proprieties.
How iPhone CSS transitions stop running smoothly
When I thought that the app was bug-free, I started to test it on Mobile Safari and then I moved all my code inside a simple XCode project (thank you @mattmight) with a webView which loads an HTML file. However, inside the webView, the transitions’ performance got worse and the elements started flickering.
In order to look into the problem, I started removing CSS proprieties and I discovered that some of them can drastically affect the transitions’ performance.
Some of the proprieties which I have tested and can cause performance issues are:
-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
CSS animation benchmark test
In these tests, I set a
-webkit-transition: all 4s linear 1s propriety to a long column of text moving it from
top: 0 to
I chose to run five tests on four different environments and I repeated each test three times on every environment.
- Style 1: neat CSS animation with no
-webkit-*proprieties except the linear transition.
- Style 2: add
-webkit-backface-visibility: hiddento all moving elements
- Style 3: add
-webkit-perspective: 800to the body
- Style 4: add
-webkit-transform-style: preserve-3dto the body
- Style 5: add
-webkit-transform: translate3d(0,0,0) rotate (0) scale (1)to all moving elements
The four environments are: - Mobile Safari on iPhone 4, iOS 4.3 - Compiled app (webView) on iPhone 4, iOS 4.3 - Mobile Safari on iPhone 3G, iOS 4.2 - Compiled app (webView) on iPhone 3G, iOS 4.2
I chose these two different platforms to empathize the performance’s gaps between them.
Results of animating one element
The graph above shows you the results of the animation of one element. As you can see, on the iPhone 3G the performance goes down every time I added a propriety to the element. Though, the situation is OK on iPhone 4, where Webkit handles better the multiple
-webkit-* proprieties. Unfortunately, I cannot prove this hypothesis, but the slowdown is clearly visible.
Results of animating two elements simultaneously
In the tests with two elements animated simultaneously, the iPhone 4 has quite good performances, but on iPhone 3 the more
As I have already said, I am not able to record the real CSS performances, but I can say that while doing the tests I could clearly see that the transitions ran slower and less smoother on every environment depending on how many
-webkit-* proprieties I added.
Comparison of the previews’ graphs
However, the iPhone 3G does not manage to load as well as the latest iPhone. In particular, the animation of multiple elements inside a webView becomes 60% slower than the single animation.
Obviously, some of these proprieties are required in certain circumstances, but I recommend you to add these proprieties only if you really need them. Otherwise, leave the
-webkit-* as default, so performances are not penalized.
Furthermore, I have recorded such values by animating a “big” element for a long period of time. If you only need small animations, such as apps transitions, you will not notice any difference.
We can inspect more in depth CSS animations’ performances by testing other types of transitions or the keyframe animations. This is not the only way to test iOS performances and my tests can be improved in many aspects. So, if you have a good idea on how to track CSS animations’ frame rate, please leave a comment!
If I will have enough time to do that, I will try to use CSS animations instead of CSS transitions. I think that both CSS transitions and CSS animations are hardware accelerated, but maybe the way iOS treats them is different.
Do you want to see a real app?
I have developed a small app called Lottery Roulette which is completely built with HTML and CSS technologies. My app also uses CSS transitions to simulate the numbers’ rotation as a slot machine does.
If you want to test it directly on your device, this is the App Store link.