Question

使用translateX或translateY时，Firefox上的页面布局似乎会受到影响。即使CSS规范声明这些属性不应影响布局，也会生成持久滚动条。

例如，转到http://daneden.me/animate并单击“fadeOutRightBig”动画。滚动条将在所有浏览器（支持CSS动画）上生成，但将在Firefox中保留。这是Mozilla或其他浏览器的错误吗？任何已知的解决方案？

Answer 1

解决此问题的另一种方法是切换到固定定位：

#EvilElement {
    position: fixed;
}

当然这可能有其他副作用，但它不会禁用整个页面的水平滚动条。

Answer 2

对我来说看起来像个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=456497但它很奇怪它没有得到关注，对我来说似乎很严重。

解决方案，如果你可以逃脱它，将隐藏html元素上的水平溢出：

html {
  overflow-x: hidden;
}

或者，如果您需要水平滚动，请将其应用于父元素。

Answer 3

对Bugzilla issue的评论很有用：这与position: relative的行为相同。保留原始元素的位置，但如果转换后的元素移动到其可查看容器（视口或可滚动元素）之外，则会添加滚动条。

这符合规范，很可能是“不会修复”。