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

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.

    

        This is the wall
    

    

        This is the background
    

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

css z-index lost after webkit transform translate3d