I have a question/problem, regarding the animations in CSS3. No matter what I try, I can't achieve a smooth animation when my screen is set to 120hz. There's a laggy effect from time to time. If I set the screen to 60hz, it's fine. I was able to reproduce the issue on all the major browsers. Here's a link with a simple animation to illustrate the problem : https://jsfiddle.net/na1dx182/
<div id="container">
<div id="track"></div>
</div>
#container {
width: 600px;
height: 400px;
background: #ddd;
}
#track {
position: absolute;
width: 8px;
height: 400px;
background: #242424;
-webkit-animation: bounce 1s linear infinite alternate;
-moz-animation: bounce 1s linear infinite alternate;
animation: bounce 1s linear infinite alternate;
}
@keyframes bounce {
from {
transform: translateX(0);
}
to {
transform: translateX(600px);
}
}
My first question is, is it related to my screen only, or anyone else with a 120hz screen is experiencing this issue too ? When I look at the animation, it's like some frames are skipped sometimes, there's a laggy effect from time to time. I have the feeling the moving bar is doing some micro jumps.
If this issue is also found by others, is there a way to fix this ? I tried many different things, including the use of transitions, of requestAnimationframe, of setInterval, but the problem is always the same. I also tried other tricks or CSS properties, like translateZ(0), backface-visibility, will-change, but no luck.
Edit : It seems like unplugging and reconnect my screens has almost fixed the issue.