translate3d（）导致Safari的剪辑

Question

我有一个Web应用程序，我正在开发，依赖于绝对定位，CSS转换和CSS转换。

我的标记：

<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）中查看示例，则会看到背景剪裁到前景图像。然而，在Chrome中，它似乎正常工作。

从背景中删除转换似乎导致渲染到工作，但我需要转换3d（）在那里进行动画目的。

先发制人感谢您的帮助。

Answer 1

我会考虑一个铬中的错误，实际上有两个问题有关它（http://code.google.com/p/chromium/issues/detail?id=116710和