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 资源管理器窗口,它会与图像模糊“交互”,这很有趣。 我尝试截取屏幕截图,但最终结果显示了它们应有的样子,并忽略了错误(没意思 :-( ))。
仅使用 CSS 解决此错误有什么想法吗?
最佳答案
更新:此问题在最新版本的 Microsoft Edge 中不再存在,应通过 Windows 10 Anniversary Update 解决。 2016 年 8 月 2 日。
感谢您报告此问题。我在 Microsoft Edge 团队工作,可以确认您的 fiddle 重现了所描述的问题。虽然我目前没有可提供的解决方法,但我会提交此文件并亲自通知相应的团队,以便尽早给予关注。
当我有更多要分享的时候,我会回来更新这个答案。
关于css - 过滤器 : blur not working on MS Edge,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35727233/