किसी भी एनीमेशन/संक्रमण का उपयोग करते समय वेबकिट सीमा-त्रिज्या और अतिप्रवाह बग

Question

जब मैं overflow, border-radius, और transition के संयोजन का उपयोग करता हूं तो मुझे अजीब बग मिल रहा है। मेरे अंदर एक आईएमजी के साथ एक div है। Div में एक सीमा त्रिज्या और अतिप्रवाह छिपाने के लिए सेट है। जब मैं आईएमजी पर होवर करता हूं तो मेरे पास एक संक्रमण होता है जो छवि को ज़ूमिंग प्रभाव बनाने के लिए बड़ा बनाता है। समस्या यह है कि ओवरफ्लो छवि के निचले बाएं और निचले दाएं भाग को तोड़ने लगता है।

मैंने आपके लिए यह देखने के लिए एक jsfiddle बनाया है कि मैं किस बारे में बात कर रहा हूं। http://jsfiddle.net/dmcgrew/HuMrC/1/

यह फ़ायरफ़ॉक्स में ठीक काम करता है लेकिन क्रोम और सफारी में टूट जाता है।

कोई भी जानता है कि इसका कारण क्या हो सकता है या इसे कैसे ठीक किया जा सकता है?

Answer 1

मुझे नहीं पता कि मैं समस्या को ठीक से समझ रहा हूं क्योंकि छवि लोड नहीं हो रही है। यदि आप height: 100%; से .inner_block जोड़ते हैं तो यह आपकी समस्या में मदद करता है?

http://jsfiddle.net/HuMrC/2/

Answer 2

स्वीकार किए जाते हैं जवाब मेरे लिए काम नहीं किया क्योंकि मैं नकाबपोश तत्व के क्लिक करने योग्य क्षेत्र में वृद्धि स्पष्ट सीमा नहीं हो सकता है, और न ही मैं इसे अन्य तत्वों की है कि अस्पष्ट करने के लिए चाहते हैं (और सेटिंग 100% की ऊंचाई ने इस मुद्दे को हल नहीं किया)।

संभावित समाधान के लिए my answer to a related question देखें।

Answer 3

मेरे पास एक ही सटीक समस्या थी। इसे मूल कंटेनर में जोड़ने से यह मेरे लिए हल हो गया (यह एक कम मिश्रण है)।

.transitionfix() { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0) 
} 

Answer 4

मैं माता पिता

li {z-index:10; overflow: hidden;} 

li img {z-index: -10;} 

अपने प्रश्न के लिए