Overflow:(not)hidden on right positioned off-canvas navigation - css

Question

I've built an off-canvas navigation menu on the right-hand side of the screen. Clicking the hamburger icon slides the menu in from right-to-left. I am using overflow:hidden on the wrapping div, so no scroll bars are present. However, when click-dragging the main body from right-to-left, it pulls the overflowing content into view. When switching the navigation to use a left positioning, this behavior does not occur... strange... Any ideas?
codepen: http://codepen.io/seejaeger/pen/eNJOeb
HTML
<div class="container">
<div class="translate">
<div class="main">
<div class="nav-wrap_small">
<img src="https://cdn4.iconfinder.com/data/icons/flat-black/128/menu.png" class="offcanvas-toggle">
</div><!-- nav-wrap_small -->
<div class="nav-wrap">
<nav class="nav-left">
<img src="" alt="" width="80%">
</nav><!-- nav-left -->
<nav class="nav-center">
products
investment funds
commentary
literature
resources
about
</nav><!-- nav-center -->
<nav class="nav-right">
contact
accounts
<br>
<input type="text" class="nav-right-searchInput">
</nav><!-- nav-right -->
</div><!-- nav-wrap -->
<!-- main content goes here -->
</div><!-- main -->
<div class="offcanvas">
<nav>
<ul>
<li>products</li>
<li>investment funds</li>
<li>commentary</li>
<li>literature</li>
<li>resources</li>
<li>about</li>
</ul>
</nav>
</div>
</div><!-- translate -->
</div><!-- container -->
CSS
.container {
overflow: hidden;
}
.translate {
transition: transform 0.3s ease;
}
.translate.is-open {
transform: translate3d(-300px, 0, 0);
}
.offcanvas {
position: absolute;
width: 300px;
right: -300px;
top: 0;
bottom: 0;
background-color: #006993;
}
.offcanvas-toggle {
width: 33px;
height: 33px;
float: right;
}
.main {
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.main:after {
content: " ";
display: block;
clear: both;
}