title: strange results differing between left and right positioning
body: <p>This is a strange bug i'm facing, i don't really understand the problem so forgive me for the obscure title.
  The problem is I'm developing a SPA style site and i want the content to slide in from the right (when the buttons at the bottom are clicked)</p>
  
  <p>I thought this would be easy, but for some reason it is easy to achieve from the left, using the example below</p>
  
  <pre><code>.page {
    right: 100%;}
    .page.active {
      right: 0; }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/pphfstos/3/" rel="nofollow">https://jsfiddle.net/pphfstos/3/</a></p>
  
  <p>and less ideally to slide the full width across like this</p>
  
  <pre><code>.page {
    left: -100%;}
    .page.active {
      left: 0; }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/pphfstos/4/" rel="nofollow">https://jsfiddle.net/pphfstos/4/</a></p>
  
  <p>But when i try to create the same effect as the first example but from the right it not only doesn't work but totally seems to destroy the page</p>
  
  <pre><code>.page {
    right: -100%;}
    .page.active {
      right: 0; }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/pphfstos/5/" rel="nofollow">https://jsfiddle.net/pphfstos/5/</a></p>
  
  <p>There is other code involved as you can see in the fiddle, but these are the only things that are different between the 3 examples
  Can anyone explain what is happening and how to fix it?</p>