Question

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

My markup:

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

My 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);
}

You can see it in action at http://jsfiddle.net/KjG3f/24/

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.

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.
​

Answer 1

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.

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.

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