translate3d() causa recorte no Safari

Question

Tenho um aplicativo da web que estou desenvolvendo que depende muito de posicionamento absoluto, transformações CSS e transições CSS.

Minha marcação:

<div class="wrapper">
    <div class="background" ></div>
    <div class="foreground" >
        <div class="image" ></div>
    </div>
</div>​

Meu CSS

.wrapper{
    -webkit-perspective: 1600;
    -webkit-perspective-origin-y: 30%;
    height: 500px;
    width: 100%;
}

.background{
    position: absolute;
    background-size: 100% 100%;
    background-image: url("http://farm9.staticflickr.com/8321/8038059897_403c567211.jpg");
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 300px;
    bottom: 0;
    pointer-events: none;
    -webkit-transform:translate3d(0px,0px,0px);
}

.foreground{
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    -webkit-transform: rotateY(25deg);
}

.foreground .image{
    background-image: url("http://farm7.staticflickr.com/6139/6198476123_754eaa1920_m.jpg");
    position: absolute;
    background-size: 100% 100%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform:translate3d(0px,10px,0px);
}

Você pode vê-lo em ação em http://jsfiddle.net/KjG3f/24/

Se você observar o exemplo no Safari (desktop e iOS), verá que a imagem do primeiro plano é cortada pelo plano de fundo.No Chrome, entretanto, parece funcionar corretamente.

Remover o translate3d() do plano de fundo parece fazer com que a renderização funcione, mas eu preciso que o translate3d() esteja lá para fins de animação.

Agradecimento antecipado pela ajuda.​

Answer 1

Eu consideraria isso um bug no Chrome e, de fato, há dois problemas em aberto em relação a isso (http://code.google.com/p/chromium/issues/detail?id=116710 e http://code.google.com/p/chromium/issues/detail?id=102673).O Firefox exibe o mesmo comportamento.

A maneira do Safari fazer isso faz sentido... quando você gira a imagem de primeiro plano em um espaço 3D, ela deve recorte a imagem atrás dela, pois eles estão no mesmo plano.Se você alterar o valor Z de translate3d nos elementos de primeiro plano ou de fundo, poderá movê-los para frente ou para trás, até onde eles não se cruzam.

Infelizmente, o suporte entre navegadores para transformações 3D ainda é muito fraco, boa sorte!