Webkit border radius with css3 translate3D bleeding

Question

Webkitベースのブラウザで問題に苦しんでいます。もしdivにボーダ半径を加えて-moz-translate3dをul内部に適用すると、元のFlexsliderスライドショーを使用しています）、境界線の半径は適用されず、コンテナを介してブリードされます。

ここで私が話していることを明確に理解するには、問題に関するフィーリンの例があります。 translate3dプロパティを削除すると、境界線の半径が適用されます。

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/

は、MacとWindows版Chromeの最新バージョンで、それの両方をテストしました。

ありがとうございます！

Answer 1

私は以前この質問に答えました。これはWebkitのバグです。

はあなたがあまりにも

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

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

旧回答源 flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox

Answer 2

は出血が偉大である、停止国境半径を追加している同じセレクタにこのコードを追加します！私はこれをボックスに使用しています。しかし、これは何とか魔法のように：beforeラベルからの矢印を消してしまうようです。これを修正する方法はありますか？

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