火狐中的滚动错误

我最近一直在研究覆盖菜单。它将包含一长串名称（无法避免）。它在Chrome上表现完美，但该列表拒绝在Firefox上滚动。我不知道是什么原因造成的，但已经创建了一个 JSFiddle 来显示正在发生的事情。

链接在这里

一些 HTML：

<div class="full-menu">
  <div class="full-menu--middle">
    <button class="menu-toggle menu-toggle--close"></button>    
    <div class="section group menu_items">
        <ul>
            <li>a bunch of options vvv</li>
        </ul>
    </div>
  </div>
</div>

一些 CSS：

html,
body {
    height: 100%;
    width: 100%;
}

.main_menu {
    display: none;
}
.full-menu {
    visibility: hidden;
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
}
.full-menu--open {
    visibility: visible;
    opacity: 1;
}
.full-menu--middle {
    display: table-cell;
    vertical-align: middle;
}
.menu-toggle {
    background-color: transparent;
    border: 0;
    color: #fff;
    position: fixed;
    left: 20px;
    top: 20px;
}
.menu-toggle:before {
    content: ''f0c9';
    font-family: 'FontAwesome';
    margin: 0 20px 0 0;
}
.menu-toggle--close {
    position: fixed;
    top: 20px;
    left: 20px;
}
.menu-toggle_black {
    background-color: transparent;
    border: 0;
    color: #000;
    position: fixed;
    left: 20px;
    top: 20px;
}
.menu-toggle_black:before {
    content: ''f0c9';
    font-family: 'FontAwesome';
    margin: 0 20px 0 0;
}
.menu_items{
    overflow: scroll;
    height: 100%;
}
.page_inner_ {
  display: table-cell;
  vertical-align: middle;
}
.page_container {
    display: table;
    height: 100%;
    width: 100%;
    position: relative;
    color: #ffffff;
}

任何帮助将不胜感激！谢谢