firefox svg greyscale問題 - 圖像變得模糊不清和移位

我正在使用以下CSS獲取懸停時的灰度效果。 Firefox中的問題是，它會稍微模糊圖像，並將其右移1-2像素。我不知道爲什麼會發生這種情況。firefox svg greyscale問題 - 圖像變得模糊不清和移位

這是一個固有的問題嗎？我該如何解決它？

.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，但不知道如何糾正這個小問題！

來源

2013-05-07 Devender Bhandari

如果真的你覺得這是問題，請提出bug http://bugzilla.mozilla.org – 2013-05-07 06:00:33

它看起來像一個只在Firefox上的錯誤，當我刪除特定行的ff意味着ff並添加一些其他懸停樣式似乎罰款。與跨域css svg有什麼關係？......但無論如何現在我已經刪除它。 – 2013-05-08 10:40:08

這是你的答案嗎？ http://stackoverflow.com/a/32391958/241291 – cobaltduck 2015-12-16 16:03:39

Firefox和SVG灰度之間的問題似乎現在已經修復。

見撥弄你的代碼示例：https://jsfiddle.net/tzi/rjotsz0p/

Firefox支持grayscale()過濾器從35版（2015年1月），所以你現在可以有一個更好的版本代碼：

.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 */ 
}

見擺弄這個新代碼：https://jsfiddle.net/tzi/x6xcx68g/

來源

2015-12-23 10:30:27 tzi

firefox svg greyscale問題 - 圖像變得模糊不清和移位

回答

相關問題