translateY/X在Firefox中引起滚动条

Question

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

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

Answer 1

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

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

html { 
    overflow-x: hidden; 
} 

或者如果你需要横向滚动，应用它的父元素。

Answer 2

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

#EvilElement { 
    position: fixed; 
} 

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

Answer 3

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

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