Databases
StackOverflow2013
Postsdbo
POWhat are the "golden rules" to increase CSS3 transition performance on mobile devices?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat are the "golden rules" to increase CSS3 transition performance on mobile devices?
    text
    copied!<p>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:</p> <pre><code>&lt;div id="navi"&gt; &lt;form&gt; &lt;input&gt;...&lt;/input&gt; &lt;/form&gt; &lt;ul&gt; &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="bg"&gt; &lt;img src="..."&gt; &lt;img src="..."&gt; &lt;img src="..."&gt; &lt;img src="..."&gt; &lt;img src="..."&gt; &lt;img src="..."&gt; &lt;img src="..."&gt; &lt;img src="..."&gt; &lt;img src="..."&gt; &lt;img src="..."&gt; &lt;img src="..."&gt; &lt;img src="..."&gt; &lt;/div&gt; #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; } </code></pre> <p>To slide in/out the div I do:</p> <pre><code>$("#navi").toggleClass("slidein"); </code></pre> <p>On my iPhone 4s this transition is very smooth. On an iPhone 4 performance is horrible.</p> <p>Is there anything that I can do to increase performance? Are there any "golden rules" or best practices?</p> <p>So far I only know of:</p> <ul> <li>Use <code>-webkit-transform:translateZ(0)</code> to trigger hardware acceleration</li> <li>Use -webkit-transform-style: preserve-3d;</li> <li>Use -webkit-backface-visibility: hidden;</li> <li>Avoid gradients</li> <li>Avoid box-shadow</li> </ul> <p>One of my main problems is that there are quite a lot of items inside <code>#navi</code> like a <code>&lt;ul&gt;</code> with many <code>&lt;li&gt;</code> elements. Underneath <code>#navi</code> 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 <code>display:none</code> on them but that's not an option since they need to be visible during the slide transition).</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload