When using transform: translate() on a parent element and its child elements requires specific z-index properties, Safari somehow resets/ignores the z-index(es) of the child elements.
Since translate() repositions an element only in the x and y axis, most of us assume that the z axis position should remain unaffected when using the function. However, Safari treats it otherwise – it seems to check that z-index is null and goes on to reset/ignore the z-index of all child elements in order to reposition the element and its children.
The easiest and failproof way to overcome this is to use transform: translate3d() instead. For example, if you need to centralise an element on screen, instead of using transform: translate(50%, -50%), use transform: translate3d(50%, -50%, 0), like this:
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
Doing so makes Safari respect the z-index properties of the child elements.