translateY/X 在 Firefox 中导致滚动条答案

【问题标题】：translateY/X causing scrollbars in FirefoxtranslateY/X 在 Firefox 中导致滚动条
【发布时间】：2014-01-03 04:22:59
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

#EvilElement {
    position: fixed;
}

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

【讨论】：

【解决方案2】：

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

如果你能侥幸解决的话，解决方案是隐藏 html 元素上的水平溢出：

html {
  overflow-x: hidden;
}

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

【讨论】：

【解决方案3】：

对Bugzilla issue 的评论提出了一个很好的观点：这与position: relative 的行为相同。原始元素的位置被保留，但如果转换后的元素移出它的可视容器（视口或可滚动元素），则会添加滚动条。

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

【讨论】：