title: CSS transform translate empty block on the top
body: <p>When I try to apply the <code>translate3d(150px,0px,0px);</code> on my "content" div I get a empty block on the top of the page. I don't know how fix it. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;style&gt;
          html, body {
              margin: 0;
              height: 100%;
          }
          #side-panel {
              color: white;
              width: 150px;
              height: 100%;
              background: #1BA39C;
              position: absolute;
              top: 0;
              left: 0;
              transition: all .2s ease-out;
          }
          ul {
              list-style: none;
              margin: 0;  
              padding: 0;
          }
          li {
              margin: 0px;
              padding: 10px;
          }
          li:hover {
              background-color: red;
          }
          #nav-bar {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 40px;
              background: black;
  
          }
          .hide {
              transform: translate3d(-150px,0,0);
          }
          .bodyhide {
              transform: translate3d(0,0,0);
          }
          .show {
              transform: translate3d(0,0,0);
          }
          .bodyshow {
              transform: translate3d(150px,0px,0px);
          }
          #content {
              transition: all .2s ease-out;
          }
          #subcontent {
              position: relative;
              top: 50px;
          }
      &lt;/style&gt;
  
  
      &lt;div id="side-panel" class="hide"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href='#'&gt;Uno&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href='#'&gt;Dos&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href='#'&gt;Three&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href='#'&gt;Cuatro&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href='#'&gt;Cinco&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div id='content'&gt;
          &lt;div id='nav-bar'&gt;
              &lt;button id="panel-button"&gt;Panel&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id='subcontent'&gt;
              &lt;p&gt;Content&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;script type='text/javascript'&gt;
          var panel = document.getElementById("side-panel");
          var button = document.getElementById("panel-button");
          var myContent = document.getElementById("content");
  
          panel.onclick = function () {
              panel.className = "hide";
              myContent.className = "bodyhide";
          };
          button.onclick = function () {
              panel.className = "show";
              myContent.className = "bodyshow";
          };
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here the codepen <a href="http://codepen.io/sbaglieri/pen/LERQXy" rel="nofollow">http://codepen.io/sbaglieri/pen/LERQXy</a></p>