css - filter: blur not working on MS Edge

Question

Microsoft Edge is not supporting filter: blur(); like it should. If I have an absolute positioned element with filter: blur();, inputs that appear on top will go nuts, merging with the blur (fun to watch).

Here's a Fiddle to show what happens. Works perfectly in Chrome and Firefox, but Edge turns into borderline epileptic. Just click the input and enjoy: https://jsfiddle.net/Cthulhu/3uz0Lpfz/2/

Here's a code example:

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

You can even try to place a windows explorer window on top of the fiddle, it will "interact" with the image blur, which is funny. I tried taking a screenshot but the end result shows things as they are supposed to be, and ignores the bug (no fun :-( ).

Any ideas to go around this bug using only CSS?

Answer 1

Update: This issue no longer exists in recent builds of Microsoft Edge, and should be resolved via the Windows 10 Anniversary Update on August 02, 2016.

---

Thank you for reporting this issue. I work on the Microsoft Edge team, and can confirm that your fiddle reproduces the issue being described. While I don't presently have a work-around to offer, I will file this and personally notify the appropriate team(s) so as to give it earlier attention.

When I have more to share, I will return to update this answer.