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.

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