Позиция: исправлено, не играя приятно с меню холста в Chrome и IE

Что предназначено

Я использую меню холста с помощью CSS и JavaScript. Меню холста работает так, как планировалось. Я хочу, чтобы меню боковой панели оставалось на экране и двигалось вперед, когда вызывается меню. Идея состоит в том, чтобы иметь триггер меню, равный 100 пикселей, и высота 100% и всегда слева от экрана. Используя абсолютную позицию позиции, у меня были проблемы с высотой во всех браузерах, используя фиксированную позицию Firefox работает нормально, но сталкивается с проблемами, упомянутыми ниже.

Ошибки

Проблемы с Firefox: нет, насколько я могу судить.

Проблемы с Chrome: после прокрутки нескольких пикселей вниз по экрану меню боковой панели не растягивается целая страница.

Internet Explorer: боковая панель, кажется, полностью исчезает при запуске меню боковой панели.

jsFiddle

Поскольку мой код тяжелый как для HTML, CSS, так и для JavaScript, я включил jsFiddle. Обратите внимание, что проблема возникает только в Chrome и Internet Explorer, насколько я знаю. Вы можете реплицировать проблему, немного прокрутив страницу вниз, а затем щелкнув по левой кнопке меню.

Скриншоты

ПРИМЕЧАНИЕ ДОСТАТОЧНЫЙ HTML-код (полный код в скрипте)

<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>

ПРИМЕЧАНИЕ ДОСТУПНЫЙ КОД CSS (полный код в скрипте)

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