Before and After pseudo background overlaying text - css

Question

So i've made some little tabs:
https://jsfiddle.net/pkpy08wy/2/
They display fine on chrome, and even fine on safari on iPad and iPhone. But on safari on a mac the background overlays the text.
Any ideas?
.address_tab {
position: relative;
display: inline-block;
padding: 10px 30px 8px;
color: #14528b;
margin-left: 20px;
}
.address_tab::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -999;
background: #d0d0d0;
background: -webkit-linear-gradient(left, #d0d0d0, #e8e8e8);
background: -o-linear-gradient(right, #d0d0d0, #e8e8e8);
background: -moz-linear-gradient(right, #d0d0d0, #e8e8e8);
background: linear-gradient(to right, #d0d0d0 , #e8e8e8);
transform: perspective(4px) rotateX(1deg);
border: 1px #b2b2b2 solid;
}
.address_tab::before {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
<div class="address_tab">
Delivery Details
</div>

Answer 1

Ok, so i did stumble across this post http://katydecorah.com/code/z-index-and-transform/ which seems to have the solution for your problem. It's a good read by they way :)
Here's an updated fiddle for you https://jsfiddle.net/VilleKoo/a8zv69ka/
.address_tab {
position: relative;
display: inline-block;
padding: 10px 30px 8px;
color: #14528b;
margin-left: 20px;
transform-style: preserve-3d;
}
.address_tab::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: #d0d0d0;
background: -webkit-linear-gradient(left, #d0d0d0, #e8e8e8);
background: -o-linear-gradient(right, #d0d0d0, #e8e8e8);
background: -moz-linear-gradient(right, #d0d0d0, #e8e8e8);
background: linear-gradient(to right, #d0d0d0 , #e8e8e8);
transform: perspective(4px) rotateX(1deg) translateZ(-1px);
border: 1px #b2b2b2 solid;
}
.address_tab::before {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
<div class="address_tab">
Delivery Details
</div>