by 3kadmin

If you’re using translateZ or translate3d on another element on the site, you might find that a zeroed out translate3d doesn’t do you any good. It turns out that Safari considers the Z axis position of an object that has been transformed when determining where to draw it instead of utilizing z-index.

Thus, this would result in the first div showing above the second:

It’s still a good idea to keep the z-index declaration for other browsers.

.on-top {
transform: translate3d(0, 0, 200px);
}