translateY/X causing scrollbars in Firefox

Question

When using translateX or translateY, the layout of the page on Firefox appears to be affected. Persistent scrollbars are generated, even though the CSS specification states that these properties shouldn't affect layout.

For an example, go to http://daneden.me/animate and click the 'fadeOutRightBig' animation. scrollbars will be generated on all browsers (that support CSS animations) but will persist in Firefox. Is this down to a mistake by Mozilla or by the other browsers? Any known solution?

Answer 1

Another way to solve this problem is to switch to fixed positioning:

#EvilElement {
    position: fixed;
}

Of course this may have other side-effects, but it won't disable horizontal scrollbars for the whole page.

Answer 2

Looks like a bug to me: https://bugzilla.mozilla.org/show_bug.cgi?id=456497 but it's weird it hasn't gotten attention, seems pretty serious to me.

The solution, if you can get away with it, would be hiding the horizontal overflow on the html element:

html {
  overflow-x: hidden;
}

Or if you need horizontal scrolling, apply it on the parent element.

Answer 3

A comment on the Bugzilla issue makes a good point: this is the same behavior as position: relative. The original element's place is retained, but if the transformed element moves outside of it's viewable container (the viewport or scrollable element), scrollbars are added.

This conforms to the spec and most likely will be "won't fix".