Vor und nach dem Pseudo-Hintergrundtext überlagert

Question

Also habe ich machte einige kleine Registerkarten:

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

Sie auf Chrom fein anzuzeigen, und sogar feine auf Safari auf dem iPad und iPhone. Aber auf Safari auf einem Mac überlagert der Hintergrund den Text.

Irgendwelche Ideen?

.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 habe ich auf diesen Beitrag stolpern http://katydecorah.com/code/z-index-and-transform/, die die Lösung für Ihr Problem zu haben scheint. Es ist eine gute lesen, indem sie Art und Weise :)

Hier ist eine aktualisierte Geige für Sie 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>