css - translateY/X 在 Firefox 中导致滚动条

Question

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

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

score 11 · Accepted Answer

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

#EvilElement {
    position: fixed;
}

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

score 9 · Accepted Answer

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

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

html {
  overflow-x: hidden;
}

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

score 5 · Accepted Answer

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

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

3 回答 3