CSS3 animation jerky/laggy on 120hz screen

时间:2016-04-15 15:15:37

标签: css3 animation frame-rate

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.

0 个答案:

没有答案