z-index vs translate3D on Chrome

Question

I decided to use:

* {
    -webkit-transform: translate3d(0px, 0px, 0px);
}

when I saw that it makes my animations much smoother, probably because it forces hardware acceleration. But I also need to make some z-index tweaks in order to place a shape in front of a text, to mask that text at some point of an animation. The thing is: my (grey) shape must move synced with another shape (the green one in the example below), which is behind the text.

I built a simple example to make it more visual. It works nicely on Firefox, but I just can't get it working on Chrome and Safari. Well, it works if I remove the translate3d thing, but since my actual project requires lots of sliding and smooth animations, the user experience would suffer if I did that.

Answer 1

Without translate3D, it's possible to position a peer DOM node (your text) between another peer (your handler) and one of its children (your mask), but only because neither your text nor your handler have explicit z-indexes. In this case all non z-indexed blocks are rendered first and then the mask is rendered last - ending up on top (even though it's a child element). Does this make sense? Well it's how browsers work.

However, when you added translate3d to "*", you added a "stacking context" to each element, so what "happened to work" without a translate3d, now doesn't. Incidentally,adding an explicit z-index to each element in your example - also "ruins" your mask. Again, you can't position a peer DOM node between another peer and one of its children, because the children inherit the parent's z-index as far as positioning relative to an uncle/aunt node goes.

My advice is to unnest your stuff so that everything you want to position relative to each other in the z-axis is a DOM peer. This requires manually calculating every element's absolute positioning, and you lose the benefit of overflow clipping, but hey, it works. You can also duplicate this by doing 3D transforms with positive and negative z-values - but again, only among peer elements.

(Marking the z-index as !important, just undoes the cascade and places the element on top of the cascading stacking order. It's a hack.)