CSS3 Animation Gotchas

CSS3 animation gotchas.txt

1) Android (till at least 4.3.1), when animating visibility, e.g accordion type movement:

.something {
  height: 0;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: visibilty $timing ease-in, opacity $timing ease-in;

  &.active {
    max-height: 500px; // something larger than the actual size
    height: auto;
    visibility: visible
    transition: visibilty $timing ease-in, opacity $timing ease-in;
  }
}

Despite the various fixes for backface-visibility, translateZ, translate3d, the item remains as if visibility was hidden

Therefore, just animate opacity and/or max-height & height