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?
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:
Or if you need horizontal scrolling, apply it on the parent element.