0

I am trying to mimic this frosted glass look: https://codepen.io/AmJustSam/pen/ModORY

to find out IE9+ doesn't support filter: blur(..

Having gone through many articles and discussions on this topic, most seem to point to using a 3rd party option like the stackblur script, which isn't an option for me unless I can download it from nuget (company policy). I am trying to inherit the body background image to a div, and then blur it to make a frosted look.

This works fine in Firefox:

.frost
{

    box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
    filter: blur(10px);
    overflow: hidden;
    background: inherit;
}

But not IE11. Some solutions I came across with svg, are for blurring an image itself. How can I blur the div inherited background with svg, if that is possible?

Edit: Although the proposed duplicate doesn't help me because, it doesn't modify the inherited background, only overlays an image over it with SVG.. It seems that might be the only solution. So, using example from the possible duplicate response:

svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svgBlur">

  <filter id="svgBlurFilter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="nonblurred" />

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="blurred" filter="url(#svgBlurFilter)" />

</svg>

seems to be getting me in the right direction, but the image dimensions on the image tag is in pixels. How would I make it dynamic to the width of the div which is defined in percentage.

eaglei22
  • 2,589
  • 1
  • 38
  • 53
  • Possible duplicate of [CSS Blur in IE 11](https://stackoverflow.com/questions/25850100/css-blur-in-ie-11) – takendarkk May 02 '18 at 19:08
  • I don't have an IE here to test. Have you already tried `-ms-filter: blur(5px)`? Or does one of these shown at [blurred-glass](http://cssdeck.com/labs/blurred-glass) work for you? – t.niese May 02 '18 at 19:24
  • Unfortunately those did not work. I opened up your link in IE11 and the drag me boxes were not blurred like in FireFox. – eaglei22 May 02 '18 at 19:29
  • At one point you have to realise that forcing the same effect across all browsers (especially the legacy, non-evergreen ones) is probably an exercise in futility, which gives you only that much in return for a lot of additional framework, libraries, workarounds, and hacks. Why don't you see it as a graceful degradation for IE11 users (who will probably see an opaque white background overlaid) instead of forcing a blur filter on the browser that clearly does not support modern CSS standards? – Terry May 02 '18 at 19:42
  • @Terry the user's use Internet explorer by default, so 99% of the user browser usage will be using IE11 with W7, until the company starts transitioning to windows 10 and Edge. Sure I can wave the white flag at some point, but this will be an application interacted daily, and it would be nice to implement the GUI the way I originally envisioned. – eaglei22 May 02 '18 at 19:48
  • It's an intranet web application btw, so I am mostly concerned with IE11 at this point, as I am unfortunately stuck with designing around it. – eaglei22 May 02 '18 at 19:50

0 Answers0