Was sind die "Goldenen Regeln" zu erhöhen CSS3-transition performance auf mobilen Geräten?

Ich bin mit ein paar wirklich einfachen CSS3-übergängen in meiner app, wie im folgenden Beispiel, wo ich versuche, um die Folie in einem div-container von Links nach rechts:

<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 div ich:

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

Auf meinem iPhone 4s dieser übergang ist sehr glatt. Auf einem iPhone 4 die performance ist schrecklich.

Gibt es irgendetwas, das ich tun kann, um die Leistung zu erhöhen? Gibt es irgendwelche "goldene " Regeln" oder best practices?

So weit ich weiß nur von:

  • Verwenden -webkit-transform:translateZ(0) auslösen hardware-Beschleunigung
  • Verwenden -webkit-transform-style: preserve-3d;
  • Verwenden -webkit-backface-visibility: hidden;
  • Vermeiden Sie Farbverläufe
  • Vermeiden, box-shadow

Einer meiner größten Probleme ist, dass es eine ganze Menge von Gegenständen, die sich im #navi wie ein <ul> mit vielen <li> Elemente.
Unter #navi es ist auch ein weiteres div-element mit einer sehr großen Bildern. Diese scheinen eine schlechtere Leistung als gut (zumindest die Leistung geht nach oben wenn ich display:none auf Sie, aber das ist keine option, da müssen Sie sichtbar sein, während der slide-übergang).

InformationsquelleAutor Timo | 2013-01-11
Schreibe einen Kommentar