5

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?

sergdenisov
  • 8,327
  • 9
  • 48
  • 63
subZero
  • 5,056
  • 6
  • 31
  • 51
  • 3
    IMHO animating height always gives sluggishness. Try animating some other attribute. For example if you position correctly `-webkit-perspective` you can easily achieve the same effect with `translate: rotateY(-90deg)`. It's not only retina, when you have ~1000 elements and animate height it's buggy. – drinchev Oct 17 '13 at 09:03
  • I don't animate height or anything considered slower, yet I observe the same exact behavior; on both Firefox and chrome. – AlexG Feb 17 '15 at 17:33
  • Try animating transform:scaleY instead and see if that helps. I'm also having tons of headaches with completely unacceptable performance with these type of things. – Reasurria Jun 17 '15 at 07:59

1 Answers1

0

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 :)

Leo
  • 51
  • 5