css - 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 上像素化图像。我不知道为什么会这样。有保持清明的 secret 方法吗？或者我必须忍受这个浏览器的缺点吗？作为示例，这里有一些并列的屏幕截图，取自 iOS 模拟器:

Answer 1

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

-webkit-transform: translateZ(0);

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