Microsoft Edge不支持过滤器:blur();喜欢它.如果我有一个带filter:blur()的绝对定位元素,那么显示在顶部的输入将变得坚固,与模糊合并(有趣的是观看).
这是一个小提琴,展示会发生什么.在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解决这个bug的想法?