Merging CSS removes CSS3 filters

I am using the ever popular Ultimo theme in 1.8.10. With 'Merge CSS' enabled in the Magento config, all site files are being merged into one file - perfect.

However, I have some important CSS3 properties which are not being included, the custom selector is included, but is empty. Example as below:-

In custommenu.css

.brands img {
  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");
  filter: gray;
  -webkit-filter: grayscale(100%);
}
.brands img: hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

You guessed it, this will allow images to be shown in the menu as grayscale and in full colour when hovered over. Working perfectly in Firebug and Chrome.

However, the generated CSS file completely omits the properties and generates as so:-

.brands img {
}
.brands img:hover {
}

My question is - why? Is this a known problem for CSS3 in Magento 1.8.10? Is there a solution to this? I wondered if there was a way to 'override' what is and is not merged?

As a possible solution, I have removed the filter properties and just put something simple like 'background: red;' and these changes do merge and display as expected in the frontend, even just 'filter: none;' does not. I have checked my filter code over and over again and cannot foresee any problem with it.