Position: fixed without playing nicely with the canvas menu in Chrome and IE

Question

What is intended

I use the canvas menu using CSS and JavaScript. The canvas menu works as planned. I want the sidebar menu to stay on the screen and move forward when the menu is called. The idea is to have a menu trigger of 100 pixels and a height of 100% and always to the left of the screen. Using the absolute position of the position, I had problems with the height in all browsers, using a fixed position Firefox works fine, but encounters the problems mentioned below.

Mistakes

Problems with Firefox: no, as far as I can tell.

Chrome issues: after scrolling a few pixels down the sidebar menu screen, the whole page does not stretch.

Internet Explorer: the sidebar seems to completely disappear when you launch the sidebar menu.

jsFiddle

Since my code is heavy for both HTML, CSS, and JavaScript, I included jsFiddle . Please note that the problem only occurs in Chrome and Internet Explorer, as far as I know. You can replicate the problem by scrolling down the page a bit and then clicking on the left menu button.

Screenshots

NOTE SUFFICIENT HTML code (full code in the script)

<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 ACCESSIBLE CSS CODE (full code in script)

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

Answer 1

Here is a job that requires very little change.

It works sequentially 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 . However, you cannot scroll the previous .sbMenuTrigger element (which solves the problem), since .sbMainContent is an element element.

There are currently a lot of inconsistencies in the browser around how fixed elements are positioned relative to elements that are translated using translate3d . The problem in IE is due to the fact that fixed elements are relative to the window, excluding elements that were converted using translate3d . To solve this problem, completely eliminate fixed positioning and add the .sbMenuTrigger element back to the normal stream by removing position: fixed (or overriding this with position: static , by 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 ).

Answer 2

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

see violin

Take a look at my changes in the following classes:

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

The main problems were:

• Unnecessary relative position and absolute position from .sbContent-one and .sbMainContent . Fixed position
• refers to a window, so when an element transitions, its behavior changes in different browsers.

Answer 3

I managed to get it working with the latest Chrome / IE 11.

jsfiddle

I moved

  <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> , so CSS has become:

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

The fixed + transform position is not always welcomed by all browsers.