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的行爲相同。原始元素的位置將保留，但如果已轉換的元素移出其可視容器（視口或可滾動元素），則會添加滾動條。

這符合規範，很可能會「不會修復」。