In researching how to create a few 2D animations, I stumbled across the following webkit transform for CSS3:
*{
-webkit-transform: translateZ(0);
}
I put it in my CSS at the top, and all of the sudden, it seemed like all of my transitions were performing smoother. I’m not sure if it is in my head, because it seems to me that if this would help, it would be included in the jQuery Mobile CSS. I did a search, and couldn’t find it anywhere.
All the same, I really couldn’t find much about this while Googling specifically in the context of iOS Apps. I only learned about it while researching animations.
I’d love to know if other developers use this with their WebApps or PhoneGap?
Update: I did run into a fellow developer’s page where he also recommends this. I still can’t tell if it’s in my head or not though.
About the Author: Sprawl
Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.
As I’ve learned since this post, the reason this helps is because transformZ requires 3D transforms, which forces the browser to swap to GPU enabled mode. By calling it on everything, the entire App runs 3D. Of course, you need to be careful with larger Apps where memory management is an issue.
FYI, here are my findings using this approach:
*{-webkit-transform: translateZ(0);}
This does help with performance… but it breaks fixed footers/header.
I have tested on iPad 1, android 2.2 and 2.3.3 and without that CSS, fixed headers work like a charm. with this CSS enabled, they never work.
Interesting find. If you are using Cordova to deploy, look into NativeControls. This plugin will let you get fixed headers/footers, without the CSS hassle.
That’s a terrible idea, and will cause your web content to use huge amounts of memory, causing Safari to get killed all the time. You can use translateZ(0), but only do so on elements that you’re animating.
Funny how much we learn in so little time. Thank you for clarifying for everyone else that might stumble upon this blog post!!
I did use this trick on our web app and it fixed our blinking probleme. I used it only on the class div where i needed it and instantly everything go fluid without blinking.
nice trick thanks!