position:fixed not playing nice with off canvas menu in Chrome and IE

Question

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

Off Canvas Menu Issues

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

screenshots and fiddle do not match... not sure what the fiddle is demonstrating — Populus, Apr 14 '15 at 15:34
Screenshots are taken from a development site. If you load fiddle in either chrome or internet explorer you can replicate the same issues displayed in screenshots.. — Simon Hayter, Apr 14 '15 at 15:35
chrome was fine for me, but I'm on Linux so it may give different results — Populus, Apr 14 '15 at 15:36

score 26 · Accepted Answer · edited May 23 '17 at 11:52

Here is a work-around that requires very little changes.

It works consistently in the latest versions of FF, Chrome, and IE11/10.

Updated Example

.sbContent-one {
  overflow: visible;       /* Or remove overflow-x: hidden */
}
.sbMainContent {
  overflow-x: hidden;
}
.sbMenuTrigger {
  position: static;        /* Or remove position: fixed */
}

The easiest way to resolve the issue in Chrome is to simply move the overflow from .sbContent-one to .sbMainContent. In doing so, you can't actually scroll past the .sbMenuTrigger element (which resolves the issue) since .sbMainContent is a sibling element.

There are currently many inconsistencies across browser around how fixed elements are positioned relative to elements that are transformed using translate3d. The issue in IE was due to the fact that fixed elements are positioned relative to the window without taking the elements that are transformed using translate3d into account. To solve this avoid fixed positioning completely, and add the element .sbMenuTrigger back into the normal flow by removing position: fixed (or overriding that with position: static, the default). In doing so, the sidebar expands as expected.

In other words:

Remove overflow-x: hidden from .sbContent-one (or override it with overflow: visible).
Add overflow-x: hidden to .sbMainContent.
Remove position: fixed from .sbMenuTrigger (or override it with position: static).

Thanks to everyone for working solutions. I've granted Josh the reward as believe the solution fits my requirements while explaining the reason why it doesn't work. Plus 1 for everyone else! thanks! — Simon Hayter, Apr 23 '15 at 14:55
@bybe Thanks. I just started another bounty which will be awarded to Joe since his solution worked as well. — Josh Crozier, Apr 23 '15 at 15:01
Hey again, I just tested it on Safari 6 and 7, seems the menu is getting margin:56px from somewhere... using .sbContainer margin-left 56px resolves the problem when the menu is open but breaks it when its closed. Eeek! why can't browsers be the same :P — Simon Hayter, May 03 '15 at 09:38

score 10 · Answer 2 · edited Apr 30 '15 at 04:50

10

Here is my solution to your problem. Tested on 3 mayor browsers and it works fine!

see fiddle

Take a look at my changes on the following classes:

remove position relative from .sbContent-one
add height: 100% to .sbContent-two (new rule)
major changes on .sbMainContent
position absolute for .sbMenuTrigger

the main problems were:

unnecessary position relative and absolute position from .sbContent-one and .sbMainContent.
position fixed is relative to the window, so its behavior varies across browsers when you translate the element.

edited Apr 30 '15 at 04:50

itzmebibin

9,199
8
48
62

answered Apr 17 '15 at 01:05

Jose Ch.

3,856
1
20
34

Not sure why someone downvoted this.. have an upvote 1+.. It mostly works, although there is a slight caveat now that you have removed `position: relative`.. if you compare [your fullscreen example](http://jsfiddle.net/e3f0yLq8/3/show/) VS the [OP's fullscreen example](http://jsfiddle.net/sLf79m5d/14/show/), you will see that the positioning of the text *"Scroll Down and expand menu to see problem"* is now off.. I'm pretty sure the OP wants to maintain that relative positioning. – Josh Crozier Apr 17 '15 at 02:40
@JoshCrozier Thats because of the JS fiddle header and iframe.if you manage to open a clean version you would see it works perfect. Also I suggested cleaning some styles that I think are unnecessary thats why I included more changes. – Jose Ch. Apr 17 '15 at 02:55

score 2 · Answer 3 · edited Apr 30 '15 at 05:22

2

I managed to make it working on last chrome/IE11.

jsfiddle

I moved the

        <div class="sbMenuTrigger" data-effect="sbFX">
            <div class="sbMenuIcon">
                <div class="sbMenuIconBackground"></div>
                <div class="sbMenuIconOverlay"></div>
            </div>
            <div class="sbMenuLogo">
                <div class="sbMenuLogoBackground"></div>
                <div class="sbMenuLogoOverlay"></div>
            </div>
        </div>

At the end of the <header> tag, so the CSS became:

.sbMenuTrigger {
    background-color:#b23445;
    cursor:pointer;
    width:100px;
    position:absolute;
    right:-100px;
    top:0;
    bottom: 0;
}

The position fixed + transform are not always welcome by all browsers.

edited Apr 30 '15 at 05:22

itzmebibin

9,199
8
48
62

answered Apr 23 '15 at 12:11

romuleald

1,406
16
31

1

Solves the issue but dislike the idea of using negative margins or positions. Additionally not sure what you did but the menu fails to close on your Fiddle. – Simon Hayter Apr 23 '15 at 16:44
Negative margin is not a problem when everything is fixed in width, for the fail to close, it's maybe a problem by the fact of moving HTML? – romuleald Apr 23 '15 at 19:06

position:fixed not playing nice with off canvas menu in Chrome and IE

3 Answers3