robbiec February 2016

Scrolling bug in Firefox

I've been working on an overlay menu recently. It'll contain a long list of names (can't be avoided). It behaves perfectly on Chrome, but the list refuses to scroll on Firefox. I've no idea what's causing this but have created a JSFiddle to show what's happening.

Link here

A bit of the 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>

A bit of the 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;
}

Any help

Answers


Frank February 2016

Take display:table; off of .full-menu and take display:table-cell; off of .full-menu--middle then add overflow:scroll; to .full-menu.


Alessio Cantarella February 2016

Maybe you should give position: absolute; to .full-menu, instead of fixed.

Post Status

Asked in February 2016
Viewed 3,220 times
Voted 6
Answered 2 times

Search




Leave an answer