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?