firefox svgグレースケールの問題 - 画像がぼやけてシフトする

Question

次のCSSを使用して、ホバーにグレースケール効果を適用します。 Firefoxの問題点は、画像をわずかにぼかし、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 */; 
} 

私はCSSを使用したいと思いますが、この小さな問題を修正する方法はわかりません。

Answer 1

FirefoxとSVGのグレースケールの問題は修正されているようです。

は、あなたのコードサンプルでフィドルを参照してください：

：あなたは今、このコードのより良いバージョンを持つことができますので、https://jsfiddle.net/tzi/rjotsz0p/

---

Firefoxは、バージョン35（2015年1月）から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 */ } 

は、この新しいコードでフィドルを参照してください。