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

Question

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 />

你甚至可以尝试在 fiddle 之上放置一个 windows 探索器 window，它会 "interact" 图像模糊，这很有趣。我尝试截取屏幕截图，但最终结果显示了它们应该是的东西，并忽略了错误（没有乐趣 :-( ).

有什么解决此错误的想法仅使用 CSS？

Answer 1

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

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

当我有更多分享时，我会return更新这个答案。

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

filter: blur not working on MS Edge

css

blur

css-filters

microsoft-edge