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

Question

我最近在Webkit浏览器中遇到过一种奇怪的行为（至少在OSX下），这比我想要的解决时间要长得多！

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

然而，当blur(0)或为指定单位（即：blur(0px)）归零时，Webkit仍会模糊该元素。

我在这里拼凑了一个快速的小提琴来演示：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下不会发生。

当然，Firefox中根本不支持filter: blur，所以我很难判断我所看到的行为是故意/预期的行为，还是这是Webkit中的错误？

我最终得出的结论是，使用blur(none)取代了所需的效果（即：删除了所有模糊效果），但我很困惑为什么使用零不会产生相同的效果其他过滤器示例（例如：filter: grayscale）可以使用零而不是none关键字重置。

为什么会这样？

Answer 1

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

要使其有效，您需要添加-webkit-transform: translateZ(0);

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

Answer 2

作为jaicab，我还必须进行过滤器转换，但使用translateZ(0)会导致我的某些内容被隐藏。我发现-webkit-backface-visibility: hidden;在使用blur(0)时会消除模糊，并且副作用较少（在我的情况下，保持内容可见）。

http://jsbin.com/OjeSAHeg/1/edit

Answer 3

试试这个：

#the_element_that_you_applied_translate_to {
  -webkit-filter: blur(0.000001px);
}