translate3d（）はSafariでクリッピングを引き起こします

Question

私は絶対位置決め、CSS変換、およびCSS遷移に大きく依存する開発しているWebアプリを持っています。

マークアップ：

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

.

私の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);
}

.

http://jsfiddle.net/kjg3f/24/ のアクションで確認できます。

Safari（デスクトップとiOSの両方）の例を見ると、前景画像が背景によって切り取られていることがわかります。しかし、クロムでは正しく機能しているようです。

背景からのtranslate3d（）を削除すると、レンダリングが行われるように見えますが、Translate3D（）がアニメーションの目的でそこにあるように必要です。

プリエンプティブ助けてくれてありがとう。

Answer 1

これはChromeのバグを検討し、確かにそれに関して2つの問題があります（http://code.google.com/p/chromium/issues/detail?id=116710と http://code.google.com/p/chromium/issues/detail?id=102673 ）。Firefoxは同じ行動を示します。

Safariの方法は理にかなっています... 3D空間で前景画像を回転させると、同じ平面上にあるように、その背後にある画像を通してクリップはクリップはあります。フォアグラウンドまたは背景要素のいずれかにTranslate3D Z値を変更すると、それらが交差しない場所に前後に移動できます。

3D変換のためのクロスブラウザのサポートは残念ながらまだかなり弱い、幸運です！