css transform + css transition = skipped frames [Google Chrome]

Question

When I click on the scene, then box falls down. When I click again, box stands up. Animation is smooth, but when I click many times in different positions, then sometimes an

Answer 1

Seems to be a Chrome bug related to transitioning a single property.

To make your second example suit your needs, you can add a silly transition

$('.scene').on('click', function() {
  $('.box').toggleClass('box-transform');
});

.scene {
  width: 500px;
  height: 500px;
  position: absolute;
  background: #efefef;
}

.box {
  position: absolute;
  left: 250px;
  top: 100px;
  width: 70px;
  height: 140px;
  background: #000;
  transform: rotate(0deg);
  transform-origin: bottom left;
    perspective: 1000px;
    transition-property: transform perspective;
    transition-duration: 600ms;
    transition-timing-function: linear;
    transition-delay: initial;
}

.box-transform {
  transform: rotate(-90deg);
    perspective: 1001px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scene">
  <div class="box"></div>
</div>