जब आप किसी छवि पर एक -webkit-filter और a -webkit-transition लागू करते हैं और होवर पर फ़िल्टर बदलते हैं, तो छवि संक्रमण अच्छी तरह से करता है, लेकिन फिर छवि वास्तव में अस्पष्ट हो जाती है।सीटी फ़िल्टर रेटिना डिस्प्ले पर फ़िल्टर करें: फ़ज़ी छवियां
नोट: यह केवल रेटिना-प्रदर्शित करता है पर होता है - कोई समस्या नहीं 'सामान्य' ppi-साथ प्रदर्शित बिल्कुल, लेकिन उदाहरण के लिए एक नया मैकबुक प्रो रेटिना प्रदर्शन के साथ पर फजी।
मेरे सीएसएस (बिना विक्रेता उपसर्गों):
img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px}
img:hover {filter:grayscale(0)}
नोट: http://jsfiddle.net/dya2t/7/: प्रभाव/बग को देखने के लिए, मैं 2 सेकंड
चेक बाहर मेरी डेमो के लिए संक्रमण अवधि निर्धारित किया है
मैं इसे कैसे ठीक कर सकता हूं?
संपादित करें: यदि मैं सेट करता हूं: होवर-स्टेट फ़िल्टर करने के लिए: कोई भी तेज नहीं! :-) लेकिन निश्चित रूप से संक्रमण अब काम नहीं करता है: -/ जैसे ही कोई छवि पर फ़िल्टर होता है (भले ही मान 0 या 0% हो), छवि रेटिना डिस्प्ले पर अस्पष्ट हो जाती है (संक्रमण के साथ या बिना ... यह सिर्फ धुंधला है, हर समय)। मुझे लगता है कि यह एक फ़िल्टर-बग है।
यह वह जगह है WebKit में एक ज्ञात बग https://bugs.webkit.org/show_bug.cgi?id=93471
आप कर सकते हैं इस तरह श्रृंखला फिल्टर: 'फिल्टर: ग्रेस्केल (0.5) कलंक (1px) को परिपूर्ण (2),' इत्यादि ..: http://jsfiddle.net/meo/dya2t/9/ लेकिन मुझे नहीं पता कि यह आपकी समस्या को हल करता है या नहीं, मेरे पास रेटिना स्क्रीन नहीं है – meo
@meo: दुर्भाग्य से चेनिंग फ़िल्टर मदद नहीं कर रहे हैं, thx वैसे भी – albuvee
अपने बेड़े में संतृप्ति फ़िल्टर बस ग्रेस्केल को ओवरराइड करता है। आपको संतृप्ति से छुटकारा पाना चाहिए। यह तीखेपन के मुद्दे को हल नहीं करेगा, लेकिन कम से कम आपका फ़िल्टर काम करेगा :) – robertp