Quelles sont les “règles d'or” pour augmenter CSS3 transition de la performance sur les appareils mobiles?

Je suis en utilisant certains vraiment simple transitions CSS3 dans mon application, comme dans l'exemple suivant, où j'essaie de glisser dans un conteneur div de gauche à droite:

<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;
}

À glisser dans la div je fais:

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

Sur mon iPhone 4s, cette transition est très lisse. Sur un iPhone 4 performance est horrible.

Est-il rien que je peux faire pour augmenter les performances? Existe-il des "règles d'or" ou de meilleures pratiques?

Jusqu'à présent, je ne sais:

• Utilisation -webkit-transform:translateZ(0) pour déclencher l'accélération matérielle
• Utilisation -webkit-transform-style: preserve-3d;
• Utilisation -webkit-backface-visibility: hidden;
• Éviter des gradients
• Éviter box-shadow

L'un de mes principaux problèmes est qu'il y a beaucoup d'éléments à l'intérieur de #navi comme un <ul> avec de nombreux <li> éléments.
Sous #navi il est aussi un autre élément div avec quelques images de grande taille. Ceux-ci semblent diminuer les performances (Au moins de l'interprétation va jusqu'lorsque j'utilise display:none sur eux, mais ce n'est pas une option, car ils ont besoin d'être visibles lors de la transition des diapositives).

OriginalL'auteur Timo | 2013-01-11