溢出:(不）隐藏在右侧定位的非画布导航上

Question

我在屏幕右侧建立了一个非画布导航菜单。点击汉堡包图标可以从右到左滑动菜单。我在包装div上使用overflow:hidden，因此不存在滚动条。但是，当从右向左单击拖动主体时，它会将溢出的内容拉入视图中。当切换导航以使用左定位时，这种行为不会发生......奇怪......有什么想法吗？

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">
                    <a href="home" class="nav-logo"><img src="" alt="" width="80%"></a> 
                </nav><!-- nav-left -->
                <nav class="nav-center">
                    <a href="#">products</a>
                    <a href="#">investment funds</a>
                    <a href="#">commentary</a>
                    <a href="#">literature</a>
                    <a href="#">resources</a>
                    <a href="#">about</a>   
                </nav><!-- nav-center -->
                <nav class="nav-right">
                    <a href="#">contact</a>
                    <a href="#">accounts</a>
                    <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><a href="#">products</a></li>
                <li><a href="#">investment funds</a></li>
                <li><a href="#">commentary</a></li>
                <li><a href="#">literature</a></li>
                <li><a href="#">resources</a></li>
                <li><a href="#">about</a></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; 
}