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.