position:fixed not playing nice with off canvas menu in Chrome and IE
Here is a work-around that requires very little changes.
It works consistently in the latest versions of FF, Chrome, and IE11/10.
.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 withoverflow: visible
). - Add
overflow-x: hidden
to.sbMainContent
. - Remove
position: fixed
from.sbMenuTrigger
(or override it withposition: static
).
Here is my solution to your problem. Tested on 3 mayor browsers and it works fine!
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.
I managed to make it working on last chrome/IE11.
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.