Was sind die "goldenen Regeln", um die CSS3-Übergangsleistung auf mobilen Geräten zu erhöhen?

Ich verwende einige wirklich einfache CSS3-Übergänge in meiner App wie im folgenden Beispiel, in dem ich versuche, einen div-Container von links nach rechts zu verschieben:

Zum Ein- / Ausblenden der div-Funktion:

Auf meinem iPhone 4s ist dieser Übergang sehr glatt. Auf einem iPhone 4 Leistung ist schrecklich.

Gibt es etwas, was ich tun kann, um die Leistung zu steigern? Gibt es "goldene Regeln" oder Best Practices?

Bisher kenne ich nur:

• Verwenden Sie -webkit-transform:translateZ(0) , um die Hardwarebeschleunigung auszulösen
• Verwenden Sie -webkit-transform-style: preserve-3d;
• Verwenden Sie -webkit-backface-visibility: hidden;
• Vermeiden Sie Steigungen
• Vermeide Box-Schatten

Eines meiner Hauptprobleme besteht darin, dass es eine Menge Elemente in #navi wie ein <ul> mit vielen <li> -Elementen gibt. Unter #navi gibt es auch noch ein div-Element mit ziemlich großen Bildern. Diese scheinen die Leistung ebenfalls zu verringern (Zumindest die Leistung steigt, wenn ich display:none für sie verwende, aber das ist keine Option, da sie während des Folienübergangs sichtbar sein müssen).