Mobile Safari灰度过滤器增加了模糊效果

Question

我用这些过滤器去饱和图像：

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

尽管过滤器似乎在Mobile Safari上对图像进行像素化，但效果很好。我不知道为什么会这样。是否有保密的秘密方法？或者我必须忍受这个浏览器的缺点吗？举个例子，这里有一些并列的截图，取自iOS模拟器：

Answer 1

有点太晚了，但这应该可以解决问题：

-webkit-transform: translateZ(0);

来源：http://matthewhappen.com/fixing-css3-filter-blur-on-retina-displays/

Answer 2

我不知道移动版Safari是采用过滤器样式还是-webkit-filter。

我不相信-webkit过滤器允许您指定过滤器分辨率，因此如果您想要覆盖此默认行为，则必须将filterRes = 400添加到过滤器定义中，或者替代方法是inline svg并为你的过滤器指定一个显式的filterRes。

<svg>
   <defs>
     <filter id="greyscale" filterRes="1278">
        <feColorMatrix etc...>
     </filter>
   </defs>

Images...

</svg>