webkit-transform breaks z-index on Safari

Question

Problem

I\'m trying to make a layer appear like it\'s a wall falling down, revealing the layer behind it. I\'ve setup two fixed div positions. The \

Answer 1

I ran into this issue and nothing would fix it until i added perspective to the parent container of the item that should be behind.

.wrap{
    perspective: 1000px;
}

Answer 2

My rotating element wasn't suitable to have a neighbour to the background, but I fixed it by applying

transform: translateZ(1000px);
transform-style: preserve-3d;

to the parent of the rotating element. Safari now thinks it's 1000px infront of the background.

Answer 3

Found a solution. Hopefully this helps someone in the future.

It turns out that there is a "bug" in the safari versions of webkit. When a 3d css animation is playing, the original z-indexes are lost. Instead, it seems like the animating pieces are put into a separate z-index "group" that is separate from the rest of the z-indexes of the DOM.

The solution is to join the backdrop div and the wall div into the same z-index group by wrapping it in a div with a webkit-transform that doesn't change anything. That causes the backdrop and wall to be children of the wrapper div and the z-indexing of the respective children are preserved.

<div id="wrapper" style="-webkit-transform: translate3d(0px, 0px, 0px);">
    <div id="wall">
        This is the wall
    </div>

    <div id="background">
        This is the background
    </div>
</div>

I believe it is the same or similar issue to this:

css z-index lost after webkit transform translate3d