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

问题描述

当我点击场景，然后框落下。当我再次点击，盒子站起来。动画很流畅，但是当我在不同位置点击多次时，有时候动画会跳过框架。

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 animation skips frames.

我在Google Chrome中有这个bug。在Opera中测试 - 一切正常，没有错误。

I have this bug on OS X in Google Chrome. Tested in Opera — everything is ok, there is no bug.

http://jsfiddle.net/nw78myhn/1/

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

Does anybody know how to fix the problem?

<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');
});

UPDATE：

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

I've noticed that there is no frame skipping if transform-origin is set for .box-transform instead of .box:

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

但在这种情况下，起点在视觉上不是左下角。

But in this case origin is not visually at bottom left. And I don't really understand why.

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

UPDATE 2 [16 February 2016]: This bug was fixed in newer versions of Google Chrome. Can't reproduce in Chrome 48.0.2564.109

推荐答案

似乎是与转换单一媒体资源相关的Chrome错误。

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>

这篇关于css transform + css transition = skipped frames [Google Chrome]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！