为什么不模糊（0）消除视网膜屏幕上Webkit / Chrome中的所有文本模糊？

Question

最近，我在Webkit浏览器中遇到了一种奇怪的行为（至少在OSX下），该行为花了比我想要的更长的时间来解决！

本质上：在元素上设置filter: blur(0)（或特定-webkit-filter于供应商）应该意味着没有任何形式的模糊应用到元素。

但是，当使用blur(0)指定的单位（即：）进行归零或归零时，Webkit仍会模糊该元素blur(0px)。

我在这里汇集了一些小提琴来演示：http : //jsfiddle.net/f9rBE/

这显示了三个包含文本（没有自定义字体）的相同div：

<div class="no-blur">
    <p><strong>This has absolutely nothing assigned</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis orci in quam venenatis, in tempus ipsum sagittis. Suspendisse potenti. Donec ullamcorper lacus vel odio accumsan, vel aliquam libero tempor. Praesent nec libero venenatis, ultrices arcu non, luctus quam. Morbi scelerisque sit amet turpis sit amet tincidunt. Praesent semper erat non purus pretium consequat. Aenean et iaculis turpis. Curabitur diam tellus, consectetur non massa et, commodo venenatis metus.</p>
</div>

一个完全没有样式分配，而另外两个则具有blur(0)和blur(0px)：

.no-blur{}
.zero-px-blur{
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}

.zero-blur{
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
}

如果您在Safari或Chrome浏览器中查看，下面两个模糊：

需要注意的几件事：

• 这种无意的模糊也发生在iOS7设备（iPhone和iPad）上的Safari中；
• 它也发生在OSX下的Chrome和Safari上；
• 在非视网膜Apple硬件上的Chrome和Safari下，似乎不会发生这种情况。
• 在OSX中的FireFox下不会发生这种情况。

当然，filter: blurFirefox尚不完全支持，因此很难判断我所看到的行为是故意的还是预期的行为，或者这是否是Webkit中的错误？

我最终得出的结论是，使用blur(none)代替具有预期的效果（即：删除了所有模糊效果），但是我感到困惑的是，为什么使用零不会带来相同的效果，因为在其他滤镜示例中（例如：）filter: grayscale可以只需使用零而不是none关键字即可重置。

为什么是这样？

Answer 1

前段时间，我不得不处理此问题，因为我必须进行过滤器转换，因此我需要将其设置为零而不是none。实际上，这是一种已知的WebKit错误，无论它是@ 2x图像，文本还是其他形式，都只会影响视网膜屏幕。

要使其正常工作，您需要添加 -webkit-transform: translateZ(0);

像魔术一样工作。但是请不要相信我，您可以在这里查看：http://jsbin.com/OnebuKU/2/edit