Retina显示屏上的CSS3关键帧动画缓慢

Question

Take a very basic CSS3 animation rule like this:

.dimension.fadeIn {
  -webkit-animation: fadeIn 0.7s;
  -webkit-animation-timing-function:ease-in-out;
  height:24px;
}

@-webkit-keyframes fadeIn {
  0% {
    height:0;
    opacity: 0;
  }
  30% {
    height:24px; /* the default row (tr) height */
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}

In Chrome on every display, except the MacBook Retina display, the animation runs smooth as silk. When we try it on a MBP retina, the animation runs visibly slower and generally feels laggy.

I experience the same case when using Transit (if you have a retina and an external display, try running Transit's demos (or any CSS3 animation?), comparing between the two screens and you should feel that it is not as smooth as you'd like)

We have tried utilizing the GPU by setting -webkit-transform: translateZ(0) and also some other stuff like -webkit-backface-visibility: hidden but to no avail.

So obviously the Retina display has a higher pixel density, but what approaches can be taken to solve this problem?

Answer 1

Well, first of all, I would change the first height:0; to height:0px; - this can prevent bugs on older browsers.

Second try and add the will-change -property. This will ease the animation on some browsers, I've experienced.

Besides I find that messing with the height in animations can create a lot of issues. I'd rather go with something like:

.dimension {
  transition: all .21s ease-in-out;
  will-change: opacity, height;
  height: 0px
}
.dimension.fadeIn {
  -webkit-animation: fadeIn 0.49s;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-delay : .21s;
  height:24px;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}

Let me know if it worked :)