firefox svg grayscale vấn đề - hình ảnh bị mờ và thay đổi

Question

Tôi đang sử dụng CSS sau đây để có được hiệu ứng màu xám trên di chuột. Vấn đề trong Firefox là nó làm mờ hình ảnh một chút và cũng chuyển nó sang bên phải 1–2 pixel. Tôi không chắc tại sao điều này lại xảy ra.

Đây có phải là sự cố vốn có không? Làm thế nào tôi có thể giải quyết nó?

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

Tôi muốn sử dụng CSS nhưng không biết cách khắc phục vấn đề nhỏ này!

Answer 1

Sự cố giữa Firefox và màu xám SVG dường như đã được khắc phục ngay bây giờ.

Xem fiddle với mẫu mã của bạn: https://jsfiddle.net/tzi/rjotsz0p/

---

Firefox hỗ trợ grayscale() lọc từ phiên bản 35 (tháng 1 năm 2015), vì vậy bây giờ bạn có thể có một phiên bản tốt hơn của mã này:

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

Xem mã fiddle bằng mã mới này: https://jsfiddle.net/tzi/x6xcx68g/