Webkit border radius combinato con css3 translate3D bleeding

Question

Sono alle prese con un problema sui browser basati su Webkit, dove se aggiungo un raggio di confine a un div e quindi applico -moz-translate3d a un ul all'interno (questo perché sull'originale esempio sto usando la presentazione di flexslider), il raggio di confine non si applica e sanguina attraverso il contenitore.

Per capire chiaramente di cosa sto parlando, ecco un esempio del problema. Se rimuovo la proprietà translate3d, viene applicato il raggio del bordo.

HTML:

<div class="wrapper"> 
    <ul> 
     <li> 
      <div class="caption"><p>Test</p></div> 
     </li> 
     <li> 
      <div class="caption"><p>Test</p></div> 
     </li> 
     <li> 
      <div class="caption"><p>Test</p></div> 
     </li> 
     <li> 
      <div class="caption"><p>Test</p></div> 
     </li> 
    </ul> 
</div> 

CSS:

.wrapper { 
    border-radius: 20px; 
    position: relative; 
    width: 500px; 
    height: 200px; 
    overflow: hidden; 
} 

.caption { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.8); 
    padding: 2rem; 
    -webkit-box-sizing: border-box; 
    width: 100%; 
    height: 3rem; 
    color: #fff; 
} 

ul { 
    width: 800%; 
    -webkit-transform: translate3d(-500px, 0, 0); 
} 

li { 
    float: left; 
    width: 500px; 
    height: 200px; 
    background-color: #000; 
    position: relative; 
} 

.caption p { 
    color: #fff; 
} 

http://jsfiddle.net/R5L3K/12/

testato sia su Chrome ultima versione su Mac e Windows.

Grazie in anticipo!

Answer 1

Ho già risposto a questa domanda. È un bug del webkit.

Aggiungere questo codice lo stesso selettore che si sta aggiungendo raggio confine troppo

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 

http://jsfiddle.net/R5L3K/14/

vecchia fonte risposta flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox

Answer 2

L'emorragia si fermò, che è grande! Sto usando questo per una scatola, che sto aggiungendo una freccia con: prima. Tuttavia, questo sembra in qualche modo magicamente rendere la freccia dal: prima che l'etichetta scompaia. C'è un modo per risolvere questo problema?

span { 
position: relative; 
border-radius: 5px; 
-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
} 

span:before { 
content: ''; 
width: 0; 
height: 0; 
top: 29px; 
right: 100%; 
visibility: hidden; 
position: absolute; 
border-width: 9px; /* 0.8em */ 
border-style: solid; 
border-color: transparent rgba(000,000,000,0.85) transparent transparent; 
}