css - 为什么这个 CSS Translate3d 动画是 Janky？

Question

我不明白为什么使用硬件加速属性 transform: translate3d(); 的 css 转换性能不流畅。也许是因为元素是绝对定位的？我不知道……

CodePen Link

有人可以向我解释为什么以及如何修复吗？如果您使用 Chrome 的开发工具 -> 时间轴，记录，然后通过单击屏幕运行动画，您会看到性能不佳。

这是我的开发工具的屏幕截图。

Answer 1

您的专栏并未脱离文档流。您可以看到初始状态下的水平滚动条。尝试添加以下代码以确保它们不会触发重绘和滚动。

.columns {
  overflow:hidden;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}