Complex animations in Safari cause sluggish performance
So after roaming the internet, I decided to ask this here.
I am creating an Ionic app for our company and one of the requirements is to use this animation:
Position + Transition - 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%;}
It mostly works, but super sluggish in iOS or Safari browser, you can even open a fiddle and witness.
After digging, I saw that you can add
-webkit-transform: translate3d(0, 0, 0);
which should force GPU hardware acceleration, but that didn't help.
Later, I read an article Paul Irish, it is recommended transform:translate
instead of attributes top
, left
.
So, I tried this and it did work, very smoothly, the problem is with translate I need to tell each element how much it should move in comparison to itself (e.g. 30px to the left), which is pretty useless when I have to support multiple screen sizes.
Any suggestions how to accomplish this with translate3d or translate or just make it smooth on Safari?
source to share
The problem is that the transform width is related to the size of the element and this is not responsive.
One possible solution is to use li elements (mostly not used in your layout) to handle this.
We can give them a 33% container size (horizontal and vertical). Now the required conversions are more or less (you can fine tune this) 100% for 1/3 of the container size and 200% for 2/3
hover the demo to see the conversion
.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>
source to share