在 Safari 和 Chrome 中晃动 css 过渡答案

【问题标题】：Shaking css transition in Safari and Chrome在 Safari 和 Chrome 中晃动 css 过渡
【发布时间】：2014-08-01 06:19:16
【问题描述】：

我正在做一个过渡，结合宽度过渡和旋转过渡。 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 方式也存在抖动。

【问题讨论】：

您是否尝试过在 'img' 本身上进行转换，而不是它的父 div 的父级的父级？
您希望 div#rondleiding 保持相同的大小吗？如果是这样，你可以给它一个固定的宽度，改变它的相对位置，然后将 div#rondleiding-img-frame 设置为绝对位置..
我最后的东西会是这个样子innouveau.nl/loodsboot-wp 绘图的每一部分都是一个独立的img，所以img 本身不能旋转。 #rondleiding 的大小保持不变，虽然它应该是响应式的，但实际上不是......为什么会这样？你认为这与相对定位有关吗？
我明白了，您是否尝试过为 scale() 而不是宽度设置动画？
还没有网，今天晚些时候试试，谢谢。

标签： jquery css

【解决方案1】：

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

起始位置：

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

结束位置：

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

如果成功了请告诉我:)

【讨论】：

【解决方案2】：

为了防止在不使用溢出的情况下出现滚动条，您可以这样设置：

#right{
  min-height: 750px;
}

【讨论】：