Webkit Rand Radius kombiniert mit css3 translate3D bluten

Question

Ich habe mit einem Problem auf Webkit-basierten Browsern zu kämpfen, wenn ich einen Grenzradius zu einem div hinzufügen und dann -moz-translate3d auf eine ul innerhalb anwenden (dies ist, weil auf dem Original Beispiel: Ich verwende flexslider slideshow), der Rahmenradius wird nicht angewendet und blutet durch den Container.

Um klar zu verstehen, worüber ich hier spreche, ist ein Geigenbeispiel über das Problem. Wenn ich die Eigenschaft translate3d entferne, wird der Grenzradius angewendet.

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/

es sowohl auf Chrome neueste Version auf Mac und Windows getestet.

Vielen Dank im Voraus!

Answer 1

Ich habe diese Frage schon beantwortet. Es ist ein Webkit Bug.

diesen Code auf den gleichen Wähler hinzufügen Sie Grenzradius zu

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

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

Alte Antwort Quelle flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox

Answer 2

Die Blutung gestoppt hinzufügen, das ist großartig! Ich verwende das für eine Box, der ich einen Pfeil hinzufüge mit: vorher. Dies scheint jedoch den Pfeil aus dem: before-Label irgendwie magisch verschwinden zu lassen. Gibt es eine Möglichkeit, das zu beheben?

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