I figured out a way around this issue. 

You need to use "-webkit-filter: unquote("grayscale(100%)");" for your filter to work. I didn't try just "filter" or any other variation for different browsers, but I'm pretty sure they would work fine with this method.

this is my css:

.top-content {
-webkit-filter: unquote("grayscale(100%)");
-webkit-transition: -webkit-filter ease 1s;
}

.top-content:hover {
-webkit-filter: unquote("grayscale(0%)");
}

And here is a screenshot of what this would look like: