过滤器：模糊不适用于 MS Edge答案

【问题标题】：filter: blur not working on MS Edge过滤器：模糊不适用于 MS Edge
【发布时间】：2016-06-14 03:01:36
【问题描述】：

Microsoft Edge 不支持 filter: blur();。如果我有一个带有filter: blur(); 的绝对定位元素，那么出现在顶部的输入将会变得疯狂，并与模糊合并（看起来很有趣）。

这是一个 Fiddle 来展示发生了什么。在 Chrome 和 Firefox 中完美运行，但 Edge 变成了边缘癫痫症。只需点击输入即可享受： https://jsfiddle.net/Cthulhu/3uz0Lpfz/2/

这是一个代码示例：

<style>
  article {
    background: url(http://uzebox.org/wiki/images/1/19/Arkanoid.gif) no-repeat;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    height: 448px;
    position: absolute;
    width: 720px;
  }

  input {
    margin: 100px 0 0 20px;
    position: relative;
  }
</style>

<article></article>
<input />

您甚至可以尝试在小提琴顶部放置一个 Windows 资源管理器窗口，它会与图像模糊“交互”，这很有趣。我尝试截取屏幕截图，但最终结果显示了应有的内容，并且忽略了错误（不好玩:-()。

有解决此错误的任何想法仅使用 CSS？

【问题讨论】：

我没有像我想的那样确定这一点，但我认为 Edge 在您使用它时不支持这一点，但我对为什么它会在 IE 中工作感到困惑。滤镜效果根本不应该在 IE 中工作。
@Rob 我的错误：小提琴在 IE 中不起作用。我想当我在我的网站上测试这个时，我发现了一些错误。感谢您的提醒。
这似乎是过滤器特有的渲染问题。如果有一个不涉及直接禁用过滤器的 CSS 解决方法，我会感到惊讶。
顺便说一下，-ms-filter 指的是从 IE5 开始的专有实现 - 前缀从不与 CSS3 过滤器一起使用，应该删除。我不能说其他前缀。
我同意这可能是一个渲染问题，因为任何交互（即使与其他窗口）都会影响模糊。我想我将不得不找到一种不同的方法并忘记 CSS3。感谢-ms-filter 的提示。

标签： css blur microsoft-edge css-filters

【解决方案1】：

更新：此问题在 Microsoft Edge 的最新版本中不再存在，应在 2016 年 8 月 2 日通过Windows 10 Anniversary Update 解决。

感谢您报告此问题。我在 Microsoft Edge 团队工作，可以确认您的小提琴重现了所描述的问题。虽然我目前没有可提供的解决方法，但我会提交此文件并亲自通知相应的团队，以便尽早给予关注。

当我有更多要分享的时候，我会回来更新这个答案。

【讨论】：

您是否以某种方式监控microsoft-edge 标签？
绝对 ? 其他标签也是如此，尽我所能。
感谢您的回答。太糟糕了，没有我预期的解决方案，但至少我很高兴有人正在研究这个问题。干杯。
Sampson，知道现在这个问题是否解决了吗？你能提供一个跟踪问题的链接吗？
@AlexP 此问题确实似乎已在 Microsoft Edge 的最新版本中得到修复。我们的Anniversary Update 将于 8 月 2 日失效，因此您应该很快会在本地看到此问题已解决（前提是您应用了更新）。