Remove grayscale in firefox

First of all, really enjoying this theme – thanks!

I’ve used this support forum to help me remove the grayscale effect from the circles (code pasted below). To remove it from firefox I have worked out that I need to remove the following line:
filter: url(inc/desaturate.svg#greyscale); /* Firefox */

However, this creates an effect in Firefox where the (now coloured) circles disappear after hovering the mouse over them.

Is there a simple line I can replace the code for firefox above that allows the circles to be coloured without this problem?

.blog .hentry a .attachment-post-thumbnail,
.archive .hentry a .attachment-post-thumbnail,
.search .hentry a .attachment-post-thumbnail {
border-radius: 180px;
filter: none;
-webkit-filter: none;
-webkit-filter: none; /* Older versions of webkit */
-moz-filter: none;
-o-filter: none;
-ms-filter: none; /* IE 10 */
filter: none; /* IE 9 */
filter: url(inc/desaturate.svg#greyscale); /* Firefox */
opacity: .8;
-webkit-opacity: .8;
-moz-opacity: .8;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
width: 100%;
height: 100%;
z-index: 1;