Dos barras de desplazamiento verticales en Firefox cuando se usa overflow-x: hidden

Question

Acabo de crear un sitio web para un cliente, y tengo un problema extraño que solo ocurre en el navegador Firefox.

En la parte superior de la página, tengo una barra de navegación que ocupa el ancho del navegador. He usado la técnica descrita aquí http://css-tricks.com/full-browser-width-bars/ para lograr el efecto lo más semánticamente posible. Luego tuve que colocar overflow-x: oculto en las etiquetas html y body para evitar que el usuario pueda desplazarse fuera del lado derecho de la pantalla.

Esto funciona muy bien en todos los navegadores que he probado desde Safari en Mac/PC, Opera, Chrome y no lo quiera, pero incluso IE7, 8 & 9 quería jugar bien. Pero, oh, no, Firefox simplemente no quiere aceptarlo.

Aunque no tengo barras de desplazamiento horizontal, que es el efecto deseado, Firefox ha decidido duplicar la cantidad de barras de desplazamiento verticales. No puedo desplazarme horizontalmente si uso un mouse, pero cuando uso el trackpad en Mac, el movimiento vertical está restringido, lo que significa que no puedo desplazarme hacia abajo y si hago un deslizamiento de dos dedos, la página se desplaza horizontalmente hacia el olvido.

Lo único que he encontrado en google y en otros lugares es que este comportamiento es un error en Firefox?

Cualquier ayuda con esta molestia es muy apreciada, muchas gracias.

Actualización: Agregado Código

Básicamente, el código es esto como theres demasiada muestran todo. Le indicaré el sitio, pero el cliente aún no lo quiere. Aquí vamos:

<nav id="menu"> 
    <ul> 
     <li>Menu Item 1</li> 
     <li>Menu Item 2</li> 
     <li>Menu Item 3</li> 
    </ul> 
</nav> 

A continuación, el CSS es esto para una barra de navegación fullwidth como el enlace anterior:

html,body{ 
    overflow-x: hidden; /*This prevents the user from scrolling horizontally*/ 
} 

#menu{ 
    position: relative; 
    background: blue; 
} 

#menu:before, #menu:after{ 
    content:''; 
    position: absolute; 
    background: inherit; 
    top: 0; 
    bottom: 0; 
    width: 9999px; /*huge width to ensure bar fills browser*/ 
} 

#menu:before{ 
    right: 100%; 
} 

#menu:after{ 
    left: 100%; 
} 

Answer 1

bien, me lo arreglaron. Contra mi mejor juicio, acabo de copiar y pegar un clearfix de cualquier sitio antiguo en la red. Después de muchas horas de resolución de problemas, descubrí que todo se debía a la corrección de que las barras de ancho completo no funcionaban como se esperaba. Lo reduje a la etiqueta de contenido css del clearfix hack. Por alguna razón, tuvo un '.' insertado como el contenido. Lo eliminé y luego agregué

* html .clearfix { height: 1%; } 

al final del bloque clearfix css y funcionó. No más desplazamientos horizontales, no más barras de desplazamiento verticales x2 en Firefox.

Answer 2

Acaba de aparecer un problema similar; Mi solución fue simplemente agregar:

html, body {height:100%;} 

Y eso lo resolvió. Solo quería publicarlo aquí porque esto sigue apareciendo en los resultados de búsqueda.