title: webkit-transform breaks z-index on Safari
body: <p><strong>Problem</strong></p>
  
  <p>I'm trying to make a layer appear like it's a wall falling down, revealing the layer behind it. I've setup two fixed div positions. The "Wall" div has a z-index of 9999, the "Background" div has a z-index of 0;</p>
  
  <p>In Webkit browsers (Safari/IOS) that I've tested, it seems like once the animation starts on the "wall", the z-indexes are lost or ignored, causing the "wall" layer to abruptly disappear behind the background div.</p>
  
  <p>Any ideas on how to preserve the z-indexes of the layers? Thanks in advance!</p>
  
  <p><strong>Example Code</strong>
  <em>(note: jsFiddle at the bottom)</em></p>
  
  <p><em>HTML Code</em></p>
  
  <pre><code>&lt;div id="wall"&gt;
      This is the wall
  &lt;/div&gt;
  
  &lt;div id="background"&gt;
      This is the background
  &lt;/div&gt;
  
  &lt;button id="start" style="float: right;"&gt;
  Flip Down
  &lt;/button&gt;
  </code></pre>
  
  <p><em>Some javascript to enable the button</em></p>
  
  <pre><code>$('#start').click(function(){
      alert('Should Fall Down like a wall, revealing the background');
      $('#wall').addClass('animated flipDown');
  });
  </code></pre>
  
  <p><em>CSS Code (cribbed from animate.css)</em></p>
  
  <pre><code>#wall{
      background-color: #F00;
      width: 100px;
      height: 100px;
      position:fixed;
      top:0;
      left:0;
      z-index: 9999;
  }
  
  #background{
      background-color: #00F;
      width: 100px;
      height: 100px; 
      position:fixed;
      top:0;
      left:0;
      z-index: 0;
  }
  
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  
  /*** flipDown ***/
  
  @-webkit-keyframes flipDown {
    0% {
      -webkit-transform: perspective(400px) rotateX(0deg);
      transform: perspective(400px) rotateX(0deg);
      -webkit-transform-style: flat;
      opacity: 1;
    }
  
    100% {
      -webkit-transform: perspective(400px) rotateX(90deg);
      transform: perspective(400px) rotateX(90deg);
      -webkit-transform-style: flat;
      opacity: 1;
    }
  }
  
  @keyframes flipDown {
    0% {
      -webkit-transform: perspective(400px) rotateX(0deg);
      -ms-transform: perspective(400px) rotateX(0deg);
      transform: perspective(400px) rotateX(0deg);
      opacity: 1;
    }
  
    100% {
      -webkit-transform: perspective(400px) rotateX(90deg);
      -ms-transform: perspective(400px) rotateX(90deg);
      transform: perspective(400px) rotateX(90deg);
      opacity: 0;
    }
  }
  
  .flipDown {
      -webkit-animation-name: flipDown;
      animation-name: flipDown;
      -webkit-backface-visibility: visible !important;
      -ms-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-transform-origin: bottom;
      -ms-transform-origin: bottom;
      transform-origin: bottom;
  }
  </code></pre>
  
  <p><strong>jsFiddle</strong></p>
  
  <p><a href="http://jsfiddle.net/3mHe2/2/">http://jsfiddle.net/3mHe2/2/</a></p>
  
  <p>Check out the differences in Safari vs Chrome.</p>