Question

In this JSFiddle, why does the Back div render in front of the Front div on Chrome and Firefox? In Mobile Safari, Front renders in front of Back.

---

The HTML

    <div id='view'>
        <div id='front' class='transformed'>Front</div>
        <div id='back' class='transformed'>Back</div>
    </div>

---

And the CSS

    div#view {
        -webkit-perspective: 100px;
        -moz-perspective: -100px;
    }

    div.transformed {
        position:absolute;
        width: 100px;
        height: 100px;
        left: 100px;
        top: 100px;
    }

    div#front {
        background-color: red;
        -webkit-transform: translateZ(20px);
        -moz-transform: translateZ(20px);
    }

    div#back {
        background-color: rgba(0, 0, 255, 0.5);
        -webkit-transform: translateZ(0px);
        -moz-transform: translateZ(0px);
    }

---

My expectation would be that since Front has been translated 20px in positive Z and Back has been translated 0px, Front should render in front of back.

Is this a bug, or am I missing something?

Answer 1

This is arguably a bug. While you shouldn’t need to, you can add:

    -webkit-transform-style: preserve-3d;

to the view div to kick the other browsers to do the right thing. It may be that using a perspective without a preserve-3d is confusing them and making them render in document order rather than z-order.

See jsfiddle: http://jsfiddle.net/VMbKk/4/

(Note you can get this same effect by just reversing the order of your front and back div’s in your html, so the front renders after the back)