css - 为什么 blur(0) 不删除视网膜屏幕上 Webkit/Chrome 中的所有文本模糊？

Question

我最近在 Webkit 浏览器(至少在 OSX 下)遇到了一个奇怪的行为，它的解决时间比我希望的要长得多!

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

然而，Webkit 仍然会在 blur(0) 时模糊元素。或指定单位归零(即:blur(0px))分配给它。

我在这里拼凑了一个快速的 fiddle 来演示: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: blur在 Firefox 中根本不支持，所以很难判断我看到的行为是有意/预期的行为，还是 Webkit 中的错误？

我最终得出的结论是使用 blur(none)相反具有预期的效果(即:删除所有模糊效果)，但我很困惑为什么使用零没有相同的效果，因为在其他过滤器示例中(例如:filter: grayscale)可以简单地使用零重置而不是 none 关键字。

这是为什么？

Answer 1

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

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

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