Две вертикальные полосы прокрутки в Firefox при использовании overflow-x: hidden

Я только что создал веб-сайт для клиента, и у меня возникла странная проблема, которая возникает только в браузере Firefox.

Вверху страницы у меня есть панель навигации, занимающая всю ширину браузера. Я использовал технику, описанную здесь http: // css-tricks.com / full-browser-width-bars / для достижения эффекта как можно более семантически. Затем мне пришлось разместить overflow-x: hidden в тегах html и body, чтобы пользователь не мог прокручивать страницу с правой стороны экрана.

Это отлично работает в каждом браузере, в котором я тестировал его, начиная с Safari на Mac / PC, Opera, Chrome и не дай бог, но даже IE7, 8 и 9 хотели работать хорошо. Но нет, Firefox просто не хочет с этим соглашаться.

Хотя у меня нет горизонтальных полос прокрутки, что является желаемым эффектом, Firefox решил удвоить количество вертикальных полос прокрутки. Я не могу прокручивать по горизонтали, если использую мышь, но когда я использую трекпад на Mac, вертикальное движение ограничено, то есть я не могу прокрутить страницу вниз, и если я проведу двумя пальцами, страница прокручивается по горизонтали в небытие.

Единственное, что я обнаружил в Google и в других местах, - это то, что такое поведение является ошибкой в ​​Firefox?

Любая помощь с этим раздражением приветствуется, Большое спасибо.

Обновление: добавлен код

В основном код такой, поскольку слишком много всего этого видно. Я бы указал вам на сайт, но клиент пока не хочет, чтобы он работал. Начнем:

Тогда CSS это для полноразмерной панели браузера, как ссылка выше:

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%;
}