What are the "golden rules" to increase CSS3 transition performance on mobile devices?

Question

I am using some really simple CSS3 transitions in my app like in the following example where I try to slide in a div container from left to right:

<div id="navi">
    <form>
        <input>...</input>
    </form>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

<div id="bg">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
</div>

#navi{
 z-index:2;
 position:fixed;
 -webkit-transform:translateZ(0);
 -webkit-transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
 -webkit-transition:left 0.5s;
 left:0;
 top:0;
 bottom:0;
 width:95%;
 overflow-x:hidden;
 overflow-y:auto;
 -webkit-overflow-scrolling:touch;
}

.slidein{
 left:500px;
}

To slide in/out the div I do:

$("#navi").toggleClass("slidein");

On my iPhone 4s this transition is very smooth. On an iPhone 4 performance is horrible.

Is there anything that I can do to increase performance? Are there any "golden rules" or best practices?

So far I only know of:

• Use -webkit-transform:translateZ(0) to trigger hardware acceleration
• Use -webkit-transform-style: preserve-3d;
• Use -webkit-backface-visibility: hidden;
• Avoid gradients
• Avoid box-shadow

One of my main problems is that there are quite a lot of items inside #navi like a <ul> with many <li> elements. Underneath #navi there is a also another div element with quite some large images. These seem to decrease performance as well (At least performance goes up when I use display:none on them but that's not an option since they need to be visible during the slide transition).

Answer 1

Try to animate transform instead of left property, it works really smooth even on old iOS devices.

#navi {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
#navi.slidein {
  -webkit-transform: translate3d(500px, 0, 0);
}

Fiddle: http://jsfiddle.net/x8zQY/2/

2017/01 update: Please read this great article about animation & GPU rendering, profiling and optimising techniques https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/