Фильтр оттенков серого CSS внезапно прекратил работать

Question

В последнее время эффект Grayscacle на моем сайте (DezinoGraphist.com) внезапно прекратил работать. Код CSS добавил эффект оттенков серого ко всем элементам определенного раздела (ассоциации), пока вы не нависнете над ними, затем элементы стали регулярно окрашиваться.

Он отлично работал в течение довольно длительного времени, но теперь внезапно прекратил работать. Я ничего не изменил. Ниже приведен код CSS для справки:

img.grayscale{ 
filter: grayscale(100%); 
-webkit-filter: grayscale(100%); /* For Webkit browsers */ 
filter: gray; /* For IE 6 - 9 */ 
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ 
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+, Firefox on Android */ 
} 

img.grayscale:hover{ 
filter: grayscale(0%); 
-webkit-filter: grayscale(0%); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 
} 

Надеюсь, это что-то очень незначительное.

Answer 1

Попробуйте поставить где-нибудь в HTML фильтра SVG:

<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> 

И тогда в вашем CSS просто использовать фильтр ID:

filter: url('#grayscale'); 

Answer 2

Спасибо Devian. Положить SVG-фильтр сделал трюк. Это сработало :)