फ़ायरफ़ॉक्स एसवीजी ग्रेस्केल मुद्दा - छवि धुंधली हो जाती है और

Question

मैं होवर पर ग्रेस्केल प्रभाव प्राप्त करने के लिए निम्न सीएसएस का उपयोग कर रहा हूं। फ़ायरफ़ॉक्स में मुद्दा यह है कि यह छवि का अल्प blurs है और यह भी 1-2 पिक्सल द्वारा सही करने के लिए यह बदलाव। मुझे यकीन है कि क्यों यह हो रहा है नहीं कर रहा हूँ।

इस एक अंतर्निहित मुद्दा है? मैं इसे कैसे सुलझाऊं?

.zd-stack img:hover { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
             /* Firefox 10+ */ 
    filter: gray;      /* IE6-9 */ 
    -webkit-filter: grayscale(100%);  /* Chrome 19+ & Safari 6+ */ 
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ 
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */; 
} 

मैं सीएसएस का उपयोग करना चाहते हैं, लेकिन इस छोटी सी समस्या को ठीक करने के लिए कैसे पता नहीं है!

Answer 1

फ़ायरफ़ॉक्स और एसवीजी ग्रेस्केल के बीच इस मुद्दे को अब तय किया जा रहा है।

अपने कोड नमूने के साथ बेला देखें: https://jsfiddle.net/tzi/rjotsz0p/

---

Firefox संस्करण 35 (जनवरी 2015) से grayscale() फिल्टर का समर्थन करता है, इसलिए अब आप इस कोड के एक बेहतर संस्करण हो सकता है:

https://jsfiddle.net/tzi/x6xcx68g/

:

.zd-stack img { 
    transition: filter .6s ease;   /* Standard (all but IE10+) */ 
} 

.zd-stack img:hover { 
    filter: gray;      /* For IE6-12 */ 
    filter: grayscale(100%);    /* Standard (only FF35+ & IE13+) */ 
    -webkit-filter: grayscale(100%);  /* For Chrome, Safari & Opera */ 
} 

इस नए कोड के साथ बेला देखें