होवर पर छवि चलती है - क्रोम अपारदर्शिता मुद्दा

Question

यहाँ मेरे पृष्ठ के साथ एक मुद्दा लगता है: http://www.lonewulf.eu

थंबनेल पर होवर करते समय चित्र दाईं ओर थोड़ा सा घूमता है, और यह केवल क्रोम पर होता है।

मेरी सीएसएस:

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

Comments

पर मेरे लिए कदम नहीं है22.0.1229.94 m

— डैनी

होवर को A टैग पर लगाने का सबसे अच्छा अभ्यास है, न कि छवि।

— डायोडस - जेम्स मैकफर्लेन

हाँ .img एक href क्लास है। क्या मुझे इसे एक अलग नाम देना चाहिए? शायद अब यह <img src> के साथ संघर्ष करता है? संपादित करें: Nvm, मैंने नाम को .img से .thumb में बदल दिया और अभी भी यह समस्या है। कोई और सुझाव?

— zefs

यह शायद कुछ है Fancybox कर रहा है।

— डायोडस - जेम्स मैकफर्लेन

Z अक्ष पर एक अनुवाद का उपयोग करना एकमात्र उपाय था जो मेरे लिए काम करता था: stackoverflow.com/questions/12502234/…

— लैरी

Answer 1

एक और उपाय उपयोग करना होगा

-webkit-backface-visibility: hidden;

मँडरा तत्व पर जो अस्पष्टता है। बैकफेस-विजिबिलिटी से संबंधित है transform, इसलिए @Beskow's को इसके साथ कुछ करना है। चूंकि यह एक वेबकिट विशिष्ट समस्या है, इसलिए आपको केवल वेबकिट के लिए बैकफेस-दृश्यता निर्दिष्ट करने की आवश्यकता है। अन्य विक्रेता उपसर्ग हैं ।

अधिक जानकारी के लिए http://css-tricks.com/almanac/properties/b/backface-visibility/ देखें ।

Comments

यह सही उत्तर है, लेकिन आपको यह कहना होगा कि backface-visibilityसंपत्ति को imgतत्व पर सेट करना होगा । मेरे मामले में, जिस तत्व में अपारदर्शिता होती है वह aतत्व था जो लपेटता है img, इसलिए आपका उत्तर मेरे लिए बिल्कुल सही नहीं था। Btw, मुझे मैक के लिए फ़ायरफ़ॉक्स पर यह गड़बड़ भी मिला, इसलिए मैं प्रत्येक विक्रेता उपसर्गों का उपयोग करने का सुझाव देता हूं।

— ओलीबोय 50

@ Oliboy50 क्षमा करें, मुझे यह तर्क देना है। Im मेरा मामला, दोषपूर्ण तत्वों के divसाथ केवल खाली थे background-image। @alpipego समाधान के लिए धन्यवाद!

— 3

इसने मेरे लिए काम किया लेकिन मेरी छवियों को खराब होने के बजाय, चिकने होने की जगह पिक्सलेट किया।

— कीरन हंटर

मुझे नहीं पता कि यह क्यों काम करता है, लेकिन मैं इस पर हुआ और इसे एक शॉट दिया। इसने एक बग तय किया जो महीनों तक मेरी साइट पर आता रहा, ताकि मैं कभी पता न लगा सकूं। धन्यवाद!

— शनीबल

मुझे z-indexमेरे लिए सही तरीके से काम करने के लिए हॉवर प्रभाव प्राप्त करने के लिए एक जोड़ना भी पड़ा ।

— जैक

Answer 2

किसी कारण से क्रोम एक अलग तरीके से 1 की अस्पष्टता के बिना तत्वों की स्थिति की व्याख्या करता है। यदि आप CSS विशेषताओं position:relativeको अपने a.img तत्वों पर लागू करते हैं तो उनकी अपारदर्शिता में भिन्नता नहीं रह जाएगी।

Comments

क्या किसी को पता है कि यह क्यों है? निश्चित रूप से यह एक hasLayout बात नहीं है?

— साइडलॉसन

अभी फ़ायरफ़ॉक्स में एक ही मुद्दा था। रिश्तेदार ने इसे ठीक नहीं किया, लेकिन तत्व पर इसे स्थापित करना - transform: translate3d(0px,0px,0px);

— ConorLuddy

मैं सफारी पर एक ही मुद्दा था और transform: translate3d(0px,0px,0px);काम किया

— zevnicsca

Answer 3

मुझे वही समस्या थी, मैंने इसे सीएसएस ट्रांसफॉर्म रोटेट के साथ तय किया। ऐशे ही:

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

यह प्रमुख ब्राउज़रों में ठीक काम करता है।

Comments

इसके लिए धन्यवाद। इसने इसे फ़ायरफ़ॉक्स में तय किया! : डी

— हंस वासिंक

हां मुझे भी Backface चाल मेरे लिए काम नहीं किया (img अंदर) लेकिन यह एक किया! धन्यवाद!

— मिकमिकम

यह एकमात्र उत्तर है जिसने मेरे लिए (क्रोम) काम किया। धन्यवाद!

— किड डायमंड

Answer 4

एक और समाधान जो मेरे लिए इस मुद्दे को तय करता था वह था नियम जोड़ना:

will-change: opacity;

मेरे विशेष मामले में यह translateZ(0)क्रोम में चीजों को ठीक करने के बावजूद, इंटरनेट एक्सप्लोरर में पेश किए गए एक समान पिक्सेल-जंपिंग मुद्दे से बचता है ।

अन्य समाधान के अधिकांश यहाँ सुझाव दिया है कि शामिल रूपांतरण (जैसे। translateZ(0), rotate(0), translate3d(0px,0px,0px), आदि) सौंपने GPU के लिए खत्म तत्व की पेंटिंग से काम करते हैं, और अधिक कुशल प्रतिपादन की इजाजत दी। will-changeउस ब्राउज़र को एक संकेत प्रदान करता है जिसमें संभवतः एक समान प्रभाव होता है (ब्राउज़र को संक्रमण को अधिक कुशलता से प्रस्तुत करने की अनुमति देता है), लेकिन कम हैकी लगता है (क्योंकि यह स्पष्ट रूप से समस्या का समाधान करने के बजाय केवल ब्राउज़र को GPU का उपयोग करने के लिए बता रहा है)।

यह कहने के बाद, यह ध्यान में रखने योग्य है कि ब्राउज़र समर्थन उतना अच्छा नहीं है will-change(हालाँकि यदि समस्या केवल Chrome के साथ है तो यह एक अच्छी बात हो सकती है!), और कुछ स्थितियों में यह स्वयं की समस्याओं को प्रस्तुत कर सकता है , लेकिन फिर भी , यह इस मुद्दे का एक और संभावित समाधान है।

Answer 5

मुझे इस गड़बड़ को रोकने के लिए नियम backface-visibilityऔर transformनियम दोनों लागू करने की आवश्यकता थी । ऐशे ही:

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

Answer 6

मेरे पास हॉवर पर (गैर-अस्पष्टता) फिल्टर के साथ एक समान मुद्दा था। आधार वर्ग के साथ एक नियम जोड़कर तय किया गया:

filter: brightness(1.01);

Comments

होवर पर एक फिल्टर संक्रमण के साथ एक ही मुद्दा। इसने मेरे लिए भी इसे ठीक कर दिया।

— जोश हैरिसन

फ़िल्टर का उपयोग करना: चमक (1); img तत्व पर यह मेरे लिए तय किया, धन्यवाद

— साईं

यह मेरे लिए काम करता है, होवर पर एक छवि पर ग्रेस्केल फ़िल्टर लागू करते समय 1px मुद्दा था। ब्राउज़र देवता आखिर उन सभी चीजों को ठीक क्यों नहीं कर सकते? मैं क्यों backface दृश्यता का उपयोग करने के लिए क्या है और जो कुछ सामान ....

— वारिन

यह इसे ठीक करता है, लेकिन संक्रमण एनीमेशन काम करना बंद कर देता है

— अमीन

Answer 7

बैक-विज़िबिलिटी (या -webkit- बैकफेस-विज़िबिलिटी) ने मेरे लिए केवल Chrome में समस्या को ठीक किया। फ़ायरफ़ॉक्स और क्रोम दोनों में ठीक करने के लिए मैंने उपरोक्त उत्तरों के निम्नलिखित संयोजन का उपयोग किया।

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}

Answer 8

मुझे सफारी 8.0.2 में इसी तरह के मुद्दे का सामना करना पड़ा, जहां छवियों को अस्पष्टता के रूप में संक्रमण होगा। यहां पोस्ट किए गए फिक्स में से किसी ने भी काम नहीं किया, हालांकि निम्नलिखित ने किया:

-webkit-transform: translateZ(0);

करने के लिए सभी क्रेडिट इस उत्तर के माध्यम से इस बाद के जवाब

Comments

अन्य सभी उत्तरों की कोशिश की, यह पहला काम था!

Answer 9

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

मेरे पास एक और ग्रिड था जहां छवियां एक अनियंत्रित सूची में थीं और मैं सिर्फ घोषित प्रदर्शन करने में सक्षम था: ब्लॉक; और मूल सूची आइटम पर एक चौड़ाई और बैकफेस-दृश्यता घोषित: छिपी; छवि तत्व पर और होवर पर कोई भी स्थान परिवर्तन प्रतीत नहीं होता है।

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

Answer 10

इस समस्या में समाधान अल्पीज मुझे परोसा गया था। -webkit-backface-visibility: hidden; इस का उपयोग करें छवि के साथ मंडराना अस्पष्टता संक्रमण में कोई कदम नहीं

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

Answer 11

मुझे यहां अन्य सभी समाधानों से परेशानी थी, क्योंकि उन्हें सीएसएस में बदलाव की आवश्यकता है जो अन्य चीजों को तोड़ सकता है - स्थिति: रिश्तेदार को पूरी तरह से पुनर्विचार करने की आवश्यकता है कि मैं अपने तत्वों को कैसे बदल रहा हूं, परिवर्तन: घुमाएं (0) मौजूदा के साथ हस्तक्षेप कर सकते हैं जब मैं एक संक्रमण-अवधि निर्धारित करता हूं, तो ट्रांसफ़ॉर्म देता है और विजयी थोड़ा संक्रमण प्रभाव देता है, और अगर मुझे वास्तव में बैकफ़ुट की आवश्यकता होती है (और उपसर्ग की पूरी आवश्यकता होती है) तो बैक-विज़िबिलिटी काम नहीं करेगी।

मेरे द्वारा पाया गया सबसे बड़ा समाधान है, बस अपने तत्व पर एक अस्पष्टता निर्धारित करना है, जो बहुत करीब है, लेकिन काफी नहीं है। 1. यह केवल एक समस्या है यदि अस्पष्टता 1 है, तो यह मेरी अन्य शैलियों में से किसी को तोड़ने या हस्तक्षेप करने के लिए नहीं है:

opacity:0.99999999;

Answer 12

रिक जिनेर के उत्तर को सही मानने के बाद मैंने पाया कि यह समस्या को ठीक नहीं करता है।

मेरे मामले में मेरे पास उत्तरदायी चौड़ाई की छवियां हैं जो अधिकतम-चौड़ाई div के भीतर हैं। एक बार साइट की चौड़ाई उस अधिकतम चौड़ाई को पार कर जाती है जब चित्र होवर पर चलते हैं (सीएसएस ट्रांसफॉर्म का उपयोग करके)।

मेरे मामले में यह तय था कि इस मामले में अधिकतम तीन, तीन कॉलमों की अधिकतम चौड़ाई में संशोधन किया जाए और इसे पूरी तरह से ठीक कर दिया जाए।

Comments

टिप्पणी के लिए धन्यवाद, मैंने यह भी देखा कि सापेक्ष स्थिति हमेशा समाधान के रूप में काम नहीं करती है इसलिए यदि यह समस्या फिर से प्रकट होती है तो मैं आपके तरीके की भी कोशिश करूंगा।

— zef

Answer 13

मैंने देखा है कि आप अपने सीएसएस में अपारदर्शिता शामिल थे। मेरे पास क्रोम (होवर पर आगे बढ़ने वाली छवि) के साथ एक ही सटीक मुद्दा था .. मैंने जो भी किया वह अपारदर्शिता को अक्षम कर दिया था और इसे हल कर दिया गया था, और अधिक छवियां नहीं चल रही थीं।

.yourclass:hover {
  /* opacity: 0.6; */
}

Answer 14

एक ही मुद्दा था, मेरा फिक्स img टैब में src से पहले क्लास लगा रहा था।