Complex Animation on Safari causes sluggish performance

Question

So after roaming around on the web I decided to ask this here.

I'm building an Ionic app for our company, and one of the demands is to apply this animation:

This is the CSS part:

.background{
    background-color:#292930;
}
ul{
    list-style:none;
}
.categories{
    text-align: center;
    position: relative;
    height:280px;
    width:90%;
}
.categories ul li div{
    font-size:18pt;
    border-radius:200px;
    margin-top:15px;
    background-color:#EAEAEA;
    height:30px;
    width:30px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transition:1s;
    transition:1s;
    position: absolute;
    display:block;
}
.moveTop {
   top:5px !important;
    left:77% !important;
}
.categories ul li:nth-child(1) div{left:3%; top:0;}
.categories ul li:nth-child(2) div{left:40%; top:0;}
.categories ul li:nth-child(3) div{left:77%; top:0;}
.categories ul li:nth-child(4) div{left:3%; top:31%;}
.categories ul li:nth-child(5) div{left:40%; top:31%;}
.categories ul li:nth-child(6) div{left:77%; top:31%;}
.categories ul li:nth-child(7) div{left:3%; top:63%;}
.categories ul li:nth-child(8) div{left:40%; top:63%;}
.categories ul li:nth-child(9) div{left:77%; top:63%;}

Basically it works, but super sluggish on iOS or Safari browser, you can even open the fiddle and testify.

After digging around I've seen that you can add

-webkit-transform: translate3d(0, 0, 0);

which should force GPU hardware acceleration, but that did not help.

Afterwards I've read an article by Paul Irish recommending using transform:translate instead of top, left attributes.

So I've tried that, and it did work, very smooth, the problem is, that with translate I need to specify each element, how much it should move compare to itself ( like 30px to the left ), which is pretty unhelpful when I have to support multiple screen sizes.

Any suggestions how to perform this with translate3d or translate or just to make it smooth on Safari?

You may have to use javascript http://stackoverflow.com/questions/25046493/transform3d-using-percentage-to-move-within-parent-object — CupawnTae, May 10 '15 at 13:39
possible duplicate of [3D transforms (translate3D) appear to be causing sluggish jQuery animations on mobile devices](http://stackoverflow.com/questions/16335295/3d-transforms-translate3d-appear-to-be-causing-sluggish-jquery-animations-on-m) — sergdenisov, May 10 '15 at 19:21

vals · Accepted Answer · 2015-05-11T19:06:24.310

The problem is that the transform width is related to the element size, and this is not responsive.

One posible solution is to use the li elements (mostly unused in your layout ) to handle this.

We can give them a size of 33% of the container (both horizontal and vertical). Now the transforms needed are more or less (you can fine adjust this) 100% for 1/3 of the size of the container and 200% for 2/3

hover the demo to see the transform

.background{
    background-color:#292930;
}
ul{
    list-style:none;
    height: 100%;
    position: relative;
}
.categories{
    text-align: center;
    position: relative;
    height:280px;
    width:90%;
}

li {
    width: 33%;
    height: 33%;
    top: 5px;
    left: 66%;
    position: absolute;
    transition:1s;
}

.categories ul li div{
    left: 5%;
    font-size:18pt;
    border-radius:200px;
    margin-top:15px;
    background-color:#EAEAEA;
    height:30px;
    width:30px;
    -webkit-transform: translate3d(0, 0, 0);
    position: absolute;
    display:block;
}

.categories ul li:nth-child(1) {transform: translate(-200%); z-index: 10;}
.categories ul li:nth-child(2) {transform: translate(-100%);}
.categories ul li:nth-child(3) {transform: translate(0%);}
.categories ul li:nth-child(4) {transform: translate(-200%, 100%);}
.categories ul li:nth-child(5) {transform: translate(-100%, 100%);}
.categories ul li:nth-child(6) {transform: translate(   0%, 100%);}
.categories ul li:nth-child(7) {transform: translate(-200%, 200%);}
.categories ul li:nth-child(8) {transform: translate(-100%, 200%);}
.categories ul li:nth-child(9) {transform: translate(   0%, 200%);}

.categories:hover ul li {transform: translate(0%, 0%) !important;}

<div class="background categories">
    <ul>
        <li><div class="elem">1</div></li>
        <li><div class="elem">2</div></li>
        <li><div class="elem">3</div></li>
        <li><div class="elem">4</div></li>
        <li><div class="elem">5</div></li>
        <li><div class="elem">6</div></li>
        <li><div class="elem">7</div></li>
        <li><div class="elem">8</div></li>
        <li><div class="elem">9</div></li>
    </ul>
</div>

+1 for animating the `translate` property, should make a big difference. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ Specifying which property you want to transition should help as well, in stead of using the default `all` — Pevara, May 10 '15 at 20:16
Very very good solution! btw, how do I control which one would be on top? — Linial, May 11 '15 at 07:49
Happy that it helped ! Added z-index to first element in the example — vals, May 11 '15 at 19:05

Complex Animation on Safari causes sluggish performance

1 Answers1