What's intended
I'm using a off canvas menu using CSS and JavaScript. The off canvas menu is working as intended. I want a sidebar menu that is left of the screen and moves along when the menu is triggered. The idea is to have a menu trigger that is 100px across and has a height of 100% and always left of the screen. Using position absolute I had problems with the height on all browsers, using fixed position Firefox works fine but encounters problems mentioned below.
Errors
Firefox Issues: None, as far as I can tell.
Chrome Issues: After scrolling a few pixels down the sidebar menu trigger does not stretch the entire page.
Internet Explorer: The sidebar seems to vanish completely when the sidebar menu is triggered.
jsFiddle
Because my code is heavy on both HTML, CSS and JavaScript I have included a jsFiddle. Please note that the problem only occurs on Chrome and Internet Explorer as far as I know. You can replicate the problem by scrolling down the page a little and then clicking the left hand side menu button.
Screenshots
NOTE WORTHY HTML CODE (Full Code in Fiddle)
<div id="sbContainer" class="sbContainer">
<div class="sbPush">
<header class="contain-to-grid sbMenu sbFX">
<nav class="top-bar" data-topbar>
<ul class="title-area show-for-small-only"><!--SITENAME--></ul>
<section class="top-bar-section"><!--LINKS--></section>
</nav>
</header>
<div class="sbContent-one">
<div class="sbContent-two">
<div class="sbMenuTrigger" data-effect="sbFX"><!--SIDEBAR TRIGGER--></div>
<div class="sbMainContent" role="document"><!--PAGE CONTENT--></div>
</div>
</div>
</div>
</div>
NOTE WORTHY CSS CODE (Full Code in Fiddle)
html, body, .sbContainer, .sbPush, .sbContent-one {
height:100%
}
.sbContent-one {
overflow-x:hidden;
background:#fff;
position:relative
}
.sbContainer {
position:relative;
overflow:hidden
}
.sbPush {
position:relative;
left:0;
z-index:99;
height:100%;
-webkit-transition:-webkit-transform .5s;
transition:transform .5s
}
.sbPush::after {
position:absolute;
top:0;
right:0;
width:0;
height:0;
background:rgba(0,0,0,0.2);
content:'';
opacity:0;
-webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbMenu-open .sbPush::after {
width:100%;
height:100%;
opacity:1;
-webkit-transition:opacity .5s;
transition:opacity .5s
}
.sbMenu {
position:absolute;
top:0;
left:0;
z-index:100;
visibility:hidden;
width:244px;
height:100%;
background:#872734;
-webkit-transition:all .5s;
transition:all .5s
}
.sbMenu::after {
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.2);
content:'';
opacity:1;
-webkit-transition:opacity .5s;
transition:opacity .5s
}
.sbMenu-open .sbMenu::after {
width:0;
height:0;
opacity:0;
-webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbFX.sbMenu-open .sbPush {
-webkit-transform:translate3d(300px,0,0);
transform:translate3d(244px,0,0)
}
.sbFX.sbMenu {
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
.sbFX.sbMenu-open .sbFX.sbMenu {
visibility:visible;
-webkit-transition:-webkit-transform .5s;
transition:transform .5s
}
.sbFX.sbMenu::after {
display:none
}
.no-csstransforms3d .sbPush,.no-js .sbPush {
padding-left:244px
}
.sbMenuTrigger {
background-color:#b23445;
cursor:pointer;
height:100%;
width:100px;
position:fixed;
left:0;
top:0
}
.sbMainContent {
margin-left:100px;
width:calc(100% - 100px);
top:0;
padding-top:50px;
position:absolute;
height:100%
}