Html – What are the “golden rules” to increase CSS3 transition performance on mobile devices

csscss-transitionshtmliphoneperformance

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).

Best Answer

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/

Related Topic