javascript - Scrolling bug in Firefox -
i've been working on overlay menu recently. it'll contain long list of names (can't avoided). behaves on chrome, list refuses scroll on firefox. i've no idea what's causing have created jsfiddle show what's happening.
link here
a bit of 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 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 appreciated! thanks
maybe should give position: absolute; .full-menu, instead of fixed.
Comments
Post a Comment