will-change や transform なども試してみてもダメな場合、
position: fixed; が足を引っ張っている可能性があります。
position: fixed; の使用の頻度を減らすか、
必要ない場合は display: none; で隠すかなどの処理をすることで、
負荷が軽減して改善することがあります。
または、アニメーションさせている要素の親要素を
overflow: hidden; すると解決することも。
<!DOCTYPE html>
<head>
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
clear: both;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
}
ul:before,
ul:after {
content: "";
display: table;
}
ul:after {
clear: both;
}
li {
background-color: #f0f0f0;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 50%;
}
li span {
display: block;
}
li:nth-child(1) span {
background-color: red;
}
li:nth-child(2) span {
background-color: blue;
}
li:nth-child(3) span {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li><span>DOCTYPE<br>DOCTYPE<br>DOCTYPE</span></li>
<li><span>html</span></li>
<li><span>PUBLIC<br>PUBLIC</span></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<head>
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
}
li {
background-color: #f0f0f0;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 50%;
}
li span {
display: block;
}
li:nth-child(1) span {
background-color: red;
}
li:nth-child(2) span {
background-color: blue;
}
li:nth-child(3) span {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li><span>DOCTYPE<br>DOCTYPE<br>DOCTYPE</span></li>
<li><span>html</span></li>
<li><span>PUBLIC<br>PUBLIC</span></li>
</ul>
</body>
</html>
$(this).animate({left : this.slideX}, 300);
$(this).css('-webkit-transform','translate(' + this.slideX + ',0)');
$(this).css('-webkit-transform','translate(' + this.slideX + 'px,0)');