वेबकिट सीमा त्रिज्या सीएसएस 3 अनुवाद 3 डी रक्तस्राव के साथ संयुक्त

Question

मैं वेबकिट आधारित ब्राउज़र पर एक समस्या के साथ संघर्ष कर रहा हूं, जहां मैं एक div के लिए एक सीमा त्रिज्या जोड़ता हूं और फिर लागू करता हूं- moz-translate3d को उल में (यह मूल पर है उदाहरण मैं फ्लेक्सस्लाइडर स्लाइड शो का उपयोग कर रहा हूं), सीमा त्रिज्या लागू नहीं होता है और कंटेनर के माध्यम से खून बहता है।

स्पष्ट रूप से समझने के लिए कि मैं किस बारे में बात कर रहा हूं, समस्या के बारे में एक बेवकूफ उदाहरण है। अगर मैं 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> 

सीएसएस:

.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/

परीक्षण किया गया यह दोनों क्रोम पर मैक और विंडोज पर नवीनतम संस्करण।

अग्रिम धन्यवाद!

Answer 1

मैंने पहले इस प्रश्न का उत्तर दिया है। यह एक वेबकिट बग है।

ही चयनकर्ता के लिए इस कोड जोड़ें आप बॉर्डर की त्रिज्या जोड़ रहे हैं भी

-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

खून बह रहा है, बंद कर दिया है जो बहुत अच्छा है! मैं इसे एक बॉक्स के लिए उपयोग कर रहा हूं, कि मैं इसके साथ एक तीर जोड़ रहा हूं: पहले। हालांकि, ऐसा लगता है कि लेबल गायब होने से पहले किसी भी तरह से तीर को जादू से बना देता है। क्या इसको ठीक करने का कोई तरीका है?

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