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

  • Question

  • 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?

    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.

    I also asked this on stackoverflow and did not get an answer: https://stackoverflow.com/questions/37767389/is-there-a-css-only-way-to-do-background-blur-in-ie11

    Monday, June 13, 2016 5:27 PM

Answers

  • Hi,

    post questions about html, css and scripting for website development to

    https://social.msdn.microsoft.com/Forums/ie/en-US/8ba70824-dba2-4425-bc75-247c2c29bde1/ie-web-development-support-moving-to-stack-overflow?forum=iewebdevelopment

    If possible include with your questions a link to your website, or a jsfiddle mashup that shows the issue.

    f12>DOM Explorer tab, select the element your interested in.... on the rhs you will see the style rules and how they are applied to an element..... style rules cascade so you have to place back-compatible legacy style rules at the top of the rule.

    eg. filter should appear at the bottom of the rule block.

    Regards.

    Questions regarding Internet Explorer 8, 9 and 10 and Internet Explorer 11 for the IT Pro Audience. Topics covered are: Installation, Deployment, Configuration, Security, Group Policy, Management questions. If you are a consumer looking for answers or to raise a question, it's highly recommended you head on over to http://answers.microsoft.com/en-us


    Rob^_^

    Tuesday, June 14, 2016 3:08 AM

All replies