css 变换 + css 过渡 = 跳过帧 [Google Chrome]

Question

当我点击场景时，盒子掉下来了。当我再次点击时，盒子站起来了。动画很流畅，但是当我在不同的位置多次点击时，有时动画会跳帧。

我在 Google Chrome 中的 OS X 上有这个错误。在 Opera 中测试 — 一切正常，没有错误。

有人知道如何解决这个问题吗？

<div class="scene">
  <div class="box"></div>
</div>

.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;
  transition: transform 600ms linear;
}

.box-transform {
  transform: rotate(-96deg);
}

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

更新：

我注意到如果 transform-origin 设置为 .box-transform 而不是 .box:

则不会跳帧

http://jsfiddle.net/nw78myhn/2/

但在这种情况下，原点在视觉上不在 bottom left。我真的不明白为什么。

更新 2 [2016 年 2 月 16 日]： 此错误已在 Google Chrome 的较新版本中修复。无法在 Chrome 48.0.2564.109

中重现

Answer 1

似乎是一个 Chrome 与转换单个属性有关的错误。

为了让你的第二个例子满足你的需要，你可以添加一个愚蠢的过渡

$('.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>

css 变换 + css 过渡 = 跳过帧 [Google Chrome]

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

css

google-chrome

css-transitions

css-transforms