title: 3D css transform div covering ignoring z-coordinate issue
body: <p>It really is a fairly complicated problem to describe verbally. Take a look at this snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("button").on("click",() =&gt; {
   $("#div1").css("transform","translateZ(50px)");
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.testdiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transition: transform 1s;
    backface-visibility: hidden;
  }
  
  #container {
    position: absolute;
    top: 100px;
    left: 100px;
    perspective: 500px;
  }
  
  #div1 {
    background-color: #f00;
    margin-left: 50px;
    transform: translateZ(10px);
  }
  
  #div2 {
    background-color: #0f0;
    transform: translateZ(30px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
    &lt;div id="div1" class="testdiv"&gt;
      1
    &lt;/div&gt;
    &lt;div id="div2" class="testdiv"&gt;
      2
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button&gt;Move 1 to front
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Using both Firefox and Chrome on my mac, after clicking the "Move 1 to front" button, div1 is still covered by div2 even it's more out of the screen (translateZ value is higher). My expectation is that div1 should cover div2 once it surpasses div2 on the z-axis, since that makes more sense. (It's a little bit abstract I know)</p>
  
  <p>Safari doesn't have this issue - so if you do happen to be able to run it on Safari, you'll see what I'm trying to describe. I'm not saying that Safari's implementation is superior, but in fact that is the behavior I'm looking for. Is there any way to achieve the same effect on Chrome and Firefox?</p>