फ्लेक्सस्लाइडर सीमा-त्रिज्या क्रोम, सफारी में छवि को लपेटता नहीं है, लेकिन फ़ायरफ़ॉक्स में

Question

मैं स्लाइड एनीमेशन विकल्प के साथ एक फ्लेक्सस्लाइडर पर एक पोर्थोल विंडो देखने की कोशिश कर रहा हूं। असल में छवि स्लाइड होगी लेकिन एक सर्कल में मुखौटा हो जाएगी और मैं इसे सीमा-त्रिज्या और अतिप्रवाह के साथ पूरा करने की कोशिश कर रहा हूं: flexslider wrapper पर छिपा हुआ है।

वांछित परिणाम देखने के लिए फ़ायरफ़ॉक्स में इस पृष्ठ को देखें, इसके कामकाज के कारण। फिर देखें कि यह क्रोम या सफारी में नहीं है। यहां लिंक है (स्लाइड शो मेरी तस्वीर है): http://imjoeybrennan.com/about.html

किसी भी मदद की बहुत सराहना की जाती है! धन्यवाद, जोय

Answer 1

ने आपको किसी समस्या के साथ मदद की। यह भी आसान है। कारण यह क्रोम या सफारी (वेबकिट) में काम नहीं कर रहा है यह है कि ओवरफ्लो-छुपा + स्थिति रिश्तेदार और सीमा त्रिज्या का उपयोग करते समय वेबकिट के साथ एक ज्ञात बग है।

.joey_pic .flexslider { 
-webkit-border-radius: 200px; 
-moz-border-radius: 200px; 
border-radius: 200px; 
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
overflow: hidden; 
} 

यह भी दांतेदार किनारों पैदा कर सकता है तो एक और संभव समाधान अपने flexslider भीतर छवियों पर सीमा का दायरा सेट करने के लिए है: आसान ठीक एक ही तत्व के लिए एक svg वेबकिट मुखौटा जोड़ने के लिए है (यह है कि तुम क्या है मंडराना संक्रमण के साथ नीचे)

.flexslider .slides img { 
max-width: 100%; 
display: block; 
border-radius: 100px; 
} 

आशा छवियों पर क्या कर रहे हैं इस में मदद करता है