translateY/X que causa barras de desplazamiento en Firefox

Question

Al usar translateX o translateY, el diseño de la página en Firefox parece verse afectado. Se generan barras de desplazamiento persistentes, aunque la especificación CSS indica que estas propiedades no deberían afectar el diseño.

Por ejemplo, vaya a http://daneden.me/animate y haga clic en la animación 'fadeOutRightBig'. las barras de desplazamiento se generarán en todos los navegadores (que admiten animaciones CSS) pero persistirán en Firefox. ¿Esto se debe a un error de Mozilla o de otros navegadores? ¿Alguna solución conocida?

Answer 1

Parece un error para mí: https://bugzilla.mozilla.org/show_bug.cgi?id=456497 pero es extraño que no haya llamado la atención, me parece muy serio.

La solución, si puede salirse con la suya, habría ocultar el desbordamiento horizontal en el elemento html:

html { 
    overflow-x: hidden; 
} 

O si es necesario el desplazamiento horizontal, que se aplican en el elemento padre.

Answer 2

Otra forma de resolver este problema es cambiar a posicionamiento fijo:

#EvilElement { 
    position: fixed; 
} 

Por supuesto, esto puede tener otros efectos secundarios, pero no va a desactivar las barras de desplazamiento horizontal para toda la página.

Answer 3

Un comentario sobre el Bugzilla issue hace un buen punto: este es el mismo comportamiento que position: relative. El lugar del elemento original se conserva, pero si el elemento transformado se mueve fuera de su contenedor visible (la ventana gráfica o el elemento desplazable), se agregan las barras de desplazamiento.

Esto se ajusta a la especificación y lo más probable es que "no arreglará".