title: Css overflow-x issue for Off-Canvas menu
body: <p><br/>
  I'm trying to create Off-canvas menu, which should appear from the right side. 
  In my body element I have a nav tag with my menu. 
  Nav tag has absolute position and right property set to negative value, because it should be outside the browser's window. Body has a 100% width and overflow-x set to hidden.
  I use jquery to toggle css 'opened' class on body element, which moves body to the left and nav appears.</p>
  
  <p>Html part:</p>
  
  <pre><code>&lt;a href="#" class="openMenu"&gt;MENU&lt;/a&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;        
          &lt;/ul&gt;
      &lt;nav&gt;
  </code></pre>
  
  <p>CSS part:</p>
  
  <pre><code>body{
      position: relative;
      overflow-x: hidden;
      width: 100%;
      left: 0;
      top: 0;
      background: orange;
  }
  
  body.opened{
      left: -150px;
  }
  
  nav{
      position: absolute;
      right: -150px;
      top:0;
      background: grey;
      width: 150px;
      z-index: 99999;
  }
  
  body, body.opened{
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
       transition: all 0.3s ease-in-out;
  }
  
  a.openMenu{
      position: absolute;
      top: 0;
      left: 50%;
      color: white;
  }
  
  ul{
      list-style: none;
  }
  
  nav ul li a{
      color: white;
  }
  </code></pre>
  
  <p>Jquery part:</p>
  
  <pre><code>$('a.openMenu').click(function(){
      $('body').toggleClass('opened');
      return false;
  });
  </code></pre>
  
  <p>Here is how it looks like:     <a href="http://jsfiddle.net/EwCVH/" rel="nofollow">http://jsfiddle.net/EwCVH/</a> <br/>
  Live example: <a href="http://vital-element.com" rel="nofollow">http://vital-element.com</a></p>
  
  <p>Everything is fine on PC, but when I open it on mobile phone for example, overflow-x property doesn't work anymore and I can scroll horizontally and see my hidden navigation, which should open only on click.</p>
  
  <p>I tried to add hidden overflow-x property to html tag and it really hides horizontal scroll on touch device, but when I try to open menu, only body moves to the left, menu is hidden by overflow property (I think). </p>
  
  <p>Any suggestions?
  Thanks. </p>