Mobile Safari grayscale filter adds blur

Question

I'm desaturating images with these filters:

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(1);
}

It works nicely, though the filter seems to pixellate images on Mobile Safari. I don't know why that is. Is there a secret method of retaining clarity? Or must I live with this browser shortcoming? As an example, here are some juxtaposed screenshots, taken from iOS Simulator:

Answer 1

A little bit too late but this should do the trick:

-webkit-transform: translateZ(0);

source: http://matthewhappen.com/fixing-css3-filter-blur-on-retina-displays/