samedi 11 juin 2016

Is there a css-only way to do background blur in IE11?


So the question is: I want to make the background visible but blurred when a popup is opened. I am not asking about image blur, I am asking about adding blur to the page, and I want to know if there is currently any css-only solution?

There are other questions similar to this however some of them ask for any solution including javascript solution while others search for image blur and not background blur and others are very old so maybe there is some new css-only solution using new browsers features.

None of the other questions in stackoverflow have a css-only solution for ie11 to the question i am asking.

The non-css solutions I am aware of are:

  1. The solution which uses javascript uses libraries like http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
  2. To create an image of the background using libraries like html2canvas: https://github.com/niklasvh/html2canvas and then insert the image inside an inline svg and apply svg filter blur to it.

I have checked and verified that none of the following works in IE11:

filter: blur(7px);
-webkit-filter: blur(7px);
filter: url(/images/blur.svg#blur);
filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='7'%20/></filter></svg>#blur");
-moz-filter: blur(7px);
-o-filter: blur(7px);
-ms-filter: blur(7px);
/* This only works for older IE. For newer IE using javascript is suggested here: http://thenewcode.com/534/Crossbrowser-Image-Blur-with-CSS */
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='7');

It will be very nice to get an official answer from someone from microsoft that this is not possible if that's the case.


Aucun commentaire:

Enregistrer un commentaire