Due barre di scorrimento verticali in Firefox quando si utilizza overflow-x: hidden

Question

Ive ha appena creato un sito Web per un client e Ive ha uno strano problema che si verifica solo nel browser Firefox.

Nella parte superiore della pagina ho una barra di navigazione che riempie la larghezza del browser. Ho usato la tecnica descritta qui http://css-tricks.com/full-browser-width-bars/ per ottenere l'effetto semanticamente possibile. Poi Ive ha dovuto posizionare overflow-x: nascosto sui tag html e body per impedire all'utente di scorrere dal lato destro dello schermo.

Questo funziona perfettamente in tutti i browser in cui l'ho provato da Safari su Mac/PC, Opera, Chrome e heaven forbid, ma anche IE7, 8 & 9 voleva giocare bene. Ma oh no Firefox non vuole proprio andare avanti con esso.

Sebbene non abbia barre di scorrimento orizzontali che sono l'effetto desiderato, Firefox ha deciso di raddoppiare la quantità di barre di scorrimento verticali. Non riesco a scorrere orizzontalmente se si utilizza un mouse, ma quando utilizzo il trackpad su Mac, il movimento verticale è limitato, ovvero non riesco a scorrere la pagina verso il basso e, se faccio scorrere due dita, la pagina si sposta orizzontalmente nell'oblio.

L'unica cosa che ho trovato su google e altrove è che questo comportamento è un bug in Firefox?

Qualsiasi aiuto con questo fastidio è molto apprezzato, molte grazie.

Aggiornamento: aggiunto il codice

In sostanza il codice è questo come theres troppo spettacolo tutto. Ti indicherò il sito ma il cliente non lo vuole ancora dal vivo. Ecco come fare:

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

Poi il CSS è questo per una barra del browser fullwidth come il link qui sopra:

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

OK, lo ha risolto. Contro il mio giudizio migliore, ho appena copiato e incollato un hack Clearfix da qualsiasi vecchio sito sulla rete. Dopo molte ore di risoluzione dei problemi, Ive ha scoperto che era tutto giù per la correzione che le barre di larghezza completa non funzionavano come previsto. L'ho ristretto al tag di contenuto css del hafix clearfix. Per qualche ragione aveva avuto un '.' inserito come contenuto. Ho rimosso questo e quindi aggiunto

* html .clearfix { height: 1%; } 

sulla fine del blocco css clearfix e ha funzionato. Niente più scrolling orizzontale, niente più scrollbar verticali x2 in Firefox.

Answer 2

Appena si è verificato un problema simile; la mia soluzione era semplicemente aggiungere:

html, body {height:100%;} 

E quello lo ha risolto. Volevo solo postarlo qui, perché questo continuava a comparire nei risultati di ricerca.