Promień obramowania Webkit w połączeniu z css3 translate3D krwawienie

Question

Mam problem z przeglądarkami opartymi na Webkit, gdzie jeśli dodam promień obramowania do div, a następnie zastosuję -moz-translate3d do ul wewnątrz (to dlatego, że na oryginale przykład korzystam z pokazu slajdów Flexslider), promień obramowania nie ma zastosowania i przepuszcza przez pojemnik.

Aby jasno zrozumieć, o czym mówię, tutaj jest przykład na temat problemu. Po usunięciu właściwości translate3d zostanie zastosowany promień obramowania.

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/

przetestowane zarówno na najnowszej wersji Chrome na Mac i Windows.

Z góry dziękuję!

Answer 1

Odpowiedziałem już na to pytanie. To błąd w webkitach.

Dodaj ten kod do tego samego selektora dodawania promień graniczny zbyt

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

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

Old źródłowego odpowiedź flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox

Answer 2

krwawienie ustało, który jest wielki! Używam tego dla pudełka, do którego dodaje się strzałkę: before. Wydaje się jednak, że magicznie robi to strzała z: przed etykietą znikają. Czy istnieje sposób, aby to naprawić?

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; 
}