title: Mobile Safari grayscale filter adds blur
body: <p>I'm desaturating images with these filters:</p>
  
  <pre><code>img {
      filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;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\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
      filter: gray;
      -webkit-filter: grayscale(1);
  }
  </code></pre>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/6jIsE.png" alt="With grayscale filter"></p>
  
  <p><img src="https://i.stack.imgur.com/Q6GXZ.png" alt="Without filter"></p>