title: translateX and overflow hidden doesn't work as expected
body: <p>This is my WordPress Starter Theme: <a href="http://starter.devurl.net/" rel="nofollow noreferrer">http://starter.devurl.net/</a></p>
  
  <p>Relevant HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
           &lt;ul class="skiplinks"&gt;...&lt;/ul&gt;
          &lt;div id="site-wrap"&gt;
              &lt;!-- content here --&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Relevant CSS:</p>
  
  <pre><code>body {
      direction: rtl;
      overflow-x: hidden;
  }
  
  #site-wrap {
      position: relative;
      min-height: 100%;
      transform: translateX(-250px);
  }
  </code></pre>
  
  <p><strong>Viewing the website in mobile (in Chrome's Devtools).</strong></p>
  
  <p>body has <code>overflow-x: hidden;</code>
  div#site-wrap has <code>transform: translateX(-250px);</code></p>
  
  <p>As far as I grasp the idea, #site-wrap suppose to move to the left and leave a blank space at the right, without any horizontal scroll to the sides.</p>
  
  <p>Notice the website direction is <strong>RTL</strong>, but it's not supposed be a problem, and I'd like to keep it that way without using ltr anywhere in the document.</p>
  
  <p>Thank you!</p>