前とテキスト

Question

を重ねる擬似背景後

だから私が作ったいくつかの小さなタブ：彼らはクロームの罰金、およびiPadとiPhoneのSafariにも、細かい表示

https://jsfiddle.net/pkpy08wy/2/

。しかし、マックのサファリでは背景がテキストを覆います。

アイデア？

.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]を、ので、私はあなたの問題の解決策を持っているように見えるこの記事http://katydecorah.com/code/z-index-and-transform/渡ってつまずくでした。彼らは道:)

ここではこれが働いたあなた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>