Problema

Estou tentando fazer com que uma camada pareça uma parede caindo, revelando a camada atrás dela. Eu configurei duas posições div fixas. A div "Wall" possui um índice z de 9999, a div "Background" tem um índice z de 0;

Nos navegadores Webkit (Safari / IOS) que testei, parece que quando a animação é iniciada na "parede", os índices z são perdidos ou ignorados, fazendo com que a camada "parede" desapareça abruptamente atrás da div de segundo plano.

Alguma idéia de como preservar os índices z das camadas? Desde já, obrigado!

Código de exemplo (nota: jsFiddle na parte inferior)

Código HTML

<div id="wall">
    This is the wall
</div>

<div id="background">
    This is the background
</div>

<button id="start" style="float: right;">
Flip Down
</button>

Algum javascript para ativar o botão

$('#start').click(function(){
    alert('Should Fall Down like a wall, revealing the background');
    $('#wall').addClass('animated flipDown');
});

Código CSS (extraído de animate.css)

#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;
}

jsFiddle

http://jsfiddle.net/3mHe2/2/

Confira as diferenças entre Safari e Chrome.