translate3d（）导致在Safari中剪切 [英] translate3d() causes clipping in Safari

问题描述

我有一个网络应用程序，我正在开发，绝对定位，CSS变换和CSS转换。

I have a web app that I am developing that relies heavily on absolute positioning, CSS transforms, and CSS transitions.

我的标记：

<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）中的示例，您将看到前景图像被背景剪切。

If you look at the example in Safari (both desktop and iOS), you'll see that the foreground image is clipped by the background. In Chrome, however, it seems to work correctly.

从背景中移除translate3d（）似乎会导致渲染工作，但我需要translate3d（）用于动画目的。

Removing the translate3d() from the background seems to cause rendering to work, but I require the translate3d() to be there for animation purposes.

抢先感谢您的帮助。

Preemptive thanks for help. ​

推荐答案

我认为这是Chrome中的一个错误， http://code.google.com/p/chromium/issues/detail?id=116710和 http://code.google.com/p/chromium/issues/detail?id=102673 ）。 Firefox表现出相同的行为。

I'd consider this a bug in Chrome, and indeed there are two issues open regarding it (http://code.google.com/p/chromium/issues/detail?id=116710 and http://code.google.com/p/chromium/issues/detail?id=102673). Firefox exhibits the same behavior.

Safari的做法很有意义...当你在3D空间中旋转前景图像时， em>通过它后面的图像剪辑，因为他们在同一个平面上。如果更改前景元素或背景元素上的translate3d Z值，则可以将它们向前或向后移动到它们不相交的位置。

The Safari way of doing it makes sense...when you rotate the foreground image in a 3D space, it should clip through the image behind it, as they're on the same plane. If you change the translate3d Z-value on either the foreground or background elements, you can move them forward or backwards to where they don't intersect.

跨浏览器对3D转换的支持不幸地仍然相当弱，祝你好运！

Cross-browser support for 3D transforms is unfortunately still pretty weak, good luck!

这篇关于translate3d（）导致在Safari中剪切的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！