在Safari和Chrome中摇晃css过渡

Question

我正在进行转换，结合了宽度转换和旋转转换。 http://innouveau.nl/loodsboot-wp/test/index2.html

问题是，在Safari和Chrome中，转换非常不稳定。

如您所见，在转换期间会出现一个滚动条，我想这与它有关。当我将父设置为溢出：隐藏时，滚动条是不可见的，但摇动仍然存在： http://www.innouveau.nl/loodsboot-wp/test/index1.html

当转换仅在旋转时，没有抖动： 请参阅“index3.html”（抱歉不允许发布3个链接）

我正在使用jquery.transit lib，但是使用普通的css-way也可以使用抖动。

Answer 1

我看到你的宽度是你的两倍......我的解决方案是按比例制作动画：

开始位置：

 $(.draggable).css({'-webkit-transform': 'rotate(0deg) scale(1) translate(0,0)'});

结束位置：

$(.draggable).css({'-webkit-transform': 'rotate(-90deg) scale(2) translate(0,-200px)'});

这是一个test demo

让我知道它是否成功：）

Answer 2

为防止出现滚动条而不使用溢出，您可以设置：

#right{
  min-height: 750px;
}