होवर पर छवि आंदोलन: क्रोम में अपारदर्शिता समस्या का समाधान

उपयोगकर्ताओं ने होवर पर छवियों के थोड़ा दाईं ओर खिसकने की समस्या की सूचना दी है, लेकिन केवल क्रोम में. यह समस्या छवि की पारदर्शिता को नियंत्रित करने के लिए अपारदर्शिता के उपयोग से उत्पन्न होती है। &&&]

.img { -एमएस-फ़िल्टर: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; फ़िल्टर:अल्फ़ा(अस्पष्टता=50); -मोज़-अस्पष्टता: 0.5; अपारदर्शिता: 0.5; -khtml-अस्पष्टता: 0.5; प्रदर्शन:ब्लॉक; सीमा:1px ठोस #121212; } .img: होवर { -एमएस-फ़िल्टर: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; फ़िल्टर:अल्फ़ा(अपारदर्शिता=100); -मोज़-अस्पष्टता: 1; अपारदर्शिता: 1; -khtml-अस्पष्टता: 1; प्रदर्शन:ब्लॉक; }

समस्या का समाधान

एक वैकल्पिक समाधान अस्पष्टता के साथ होवर तत्वों पर -वेबकिट-बैकफेस-विजिबिलिटी प्रॉपर्टी का उपयोग करने में निहित है। यह गुण प्रभावित करता है कि रूपांतरित होने पर तत्व का पिछला चेहरा कैसे प्रस्तुत होता है। इस मामले में, यह क्रोम में अपारदर्शिता परिवर्तन के कारण होने वाली अनपेक्षित हलचल को संबोधित करता है।

.img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}

.img:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

-webkit-backface-visibility:hidden; &&&]

अतिरिक्त विचार

-वेबकिट-बैकफेस-विजिबिलिटी प्रॉपर्टी वेबकिट ब्राउज़र के लिए विशिष्ट है, इसलिए आपको अन्य इंजनों के लिए विक्रेता उपसर्गों की आवश्यकता हो सकती है। अधिक व्यापक जानकारी के लिए, सीएसएस-ट्रिक्स दस्तावेज़ देखें।