ओवरफ्लो सीमा-त्रिज्या के साथ छिपा हुआ है और अनुवाद 3 डी

Question

जब overflow: hidden; और border-radius के साथ ब्लॉक की सामग्री का अनुवाद किया गया है, तो इसके कोनों मजाक नहीं कर रहे हैं। क्या इसे ठीक करने का कोई समाधान है?

एचटीएमएल

<div class="scroller"> 
    <div class="scroller-content"></div> 
</div> 

सीएसएस

.scroller{ 
    width: 300px; 
    height: 500px; 
    border: 3px solid red; 
    border-radius: 30px; 
    overflow: hidden; 
} 
.scroller-content{ 
    width: 300px; 
    height: 300px; 
    background: green; 
    -webkit-transform: translate3d(0, -8px, 0); 
} 

http://jsfiddle.net/aZ5Qn/

Answer 1

जब से तुम में जेड उपयोग नहीं कर रहे अनुवाद करते हैं, आप translate2d को बदल सकते हैं, कि करता है काम:

demo

.scroller{ 
width: 300px; 
height: 500px; 
border: 3px solid red; 
border-radius: 30px; 
overflow: hidden; 
} 
.scroller-content{ 
width: 300px; 
height: 300px; 
background: green; 
-webkit-transform: translate(0, -8px); 
} 

यह छत्तीवी मालेक द्वारा दिए गए लिंक में दस्तावेज किया गया है, लेकिन वहां यह कहा गया है कि केवल मोबाइल ब्राउज़र के लिए है, और मेरे पास यह समस्या डेस्कटॉप में है।

संपादित

यह भी काम करता है (कम से कम डेस्कटॉप में) यदि आप अतिप्रवाह सेट और में एक ही तत्व

.scroller{ 
    width: 300px; 
    height: 500px; 
    border: 3px solid red; 
    border-radius: 30px; 
    overflow: hidden; 
    -webkit-transform: translate3d(0, -8px, 5px); 
} 
.scroller-content{ 
    width: 300px; 
    height: 300px; 
    background: green; 
} 

Answer 2

Accually को बदलने, तो आप सिर्फ

transform: translate3d(0,0,0); डाल सकते हैं

आपके तत्व पर जिसकी आवश्यकता है overflow + border-radius कॉम्बो है ...