filter: blur(1px); doesn't work in Firefox, Internet Explorer, and Opera

Question

I have a problem with CSS. When I try to do

-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px)         


        

Answer 1

That sounds about right, and it is currently supported in:

• Chrome 18+
• Chrome for Android 25+
• Safari 6+
• iOS Safari 6+
• BlackBerry browser 10+

Reference

Here is an article from David Walsh (works at Mozilla) on Internet Explorer specific filters, for example t motion blur:

.blur { filter:blur(add = 0, direction = 300, strength = 10); }

It looks like normal blurring support is patchy with Internet Explorer though and I'm not surprised, especially pre-9.

Answer 2

Try with SVG filter.

img {
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url(#blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}

<img src="https://i.stack.imgur.com/oURrw.png" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>

Answer 3

You can do an SVG blur filter in Gecko-based browsers. But the thing you have above is WebKit-only and not standardized, so no one else supports it.

Answer 4

I tried all the above methods, but as usual Internet Explorer / Microsoft Edge wanted to do things differently so I couldn't get it consistent.

In the end I had to jump through a series of hoops to get it working how I wanted across all modern browsers:

1. Use the CSS already mentioned so it would work on non-IE browsers without the overhead of the fix I had to use for IE:

   -webkit-filter: blur(1px);
   -moz-filter: blur(1px);
   -ms-filter: blur(1px);
   -o-filter: blur(1px);
   filter: blur(1px);
   

2. Detect whether Internet Explorer / Microsoft Edge was being used using this JavaScript (thanks Mario).

3. If Internet Explorer / Microsoft Edge was detected then load the image into a hidden img field on the page. You have to do this using the onload function to make sure the image has loaded before you operate on it otherwise the next step fails (thanks Josh Stodola):

   var img = new Image();
   img.onload = function() { blurTheImage(); }
   img.src = "http://path/to/image.jpg";
   

4. Use StackBlur JavaScript which works on IE and Edge (thanks Mario Klingemann). The image should be available by CORS.

   HTML:

   <div id="ie-image-area" style="display: none;">
       <img id="ie-image"/>
       <canvas id="ie-canvas"></canvas>
   </div>
   

   JavaScript:

   function blurTheImage() {
       $("#ie-image").attr("src", "http://path/to/image.jpg");
       StackBlur.image('ie-image', 'ie-canvas', 1, false);
   }
   

5. As it happens I wanted to set is as a background, so I had to convert the image before setting the data (thanks user3817470):

   imageLinkOrData = document.querySelector('#ie-canvas').toDataURL("image/png");
   $('#background-image').css('background-image', 'url(' + imageLinkOrData + ')');
   

6. Once loaded and blurred I then faded it in using CSS and a transparency class as jQuery fadeTo wasn't looking great (thanks Rich Bradshaw):

   $('#background-image').toggleClass('transparent');
   

Phew, I think I need a tea break (or perhaps something much stronger!).

A sample of it working (thanks Alex78191):

function detectIE() {
  return navigator.userAgent.search(/MSIE|Trident|Edge/) >= 0;
}

let image = document.querySelector('#img-for-blur');
image.src = image.getAttribute('data-src');
if (detectIE()) {
  image.onload = function() {
    StackBlur.image('img-for-blur', 'ie-canvas', 4, false);
  };
} else {
  image.style.display = 'block';
}

img {
  filter: blur(4px);
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.0/stackblur.js"></script>
<img id="img-for-blur" data-src="https://i.stack.imgur.com/oURrw.png">
<canvas id="ie-canvas"></canvas>

Answer 5

filter: blur(3px);
-webkit-filter: blur(3px);
-ms-filter: blur(3px);
filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='3'%20/></filter></svg>#blur");
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); 

Answer 6

Here is a novel blur technique that works across all browsers (including Internet Explorer 10/11) and doesn't require filters, canvas, or JavaScript.

The basic technique is to scale down the image size, and then use a 3D-scaling matrix on the parent to zoom back to full size. This effectively downsamples the image and does a rough blurring effect.

body {
  font-family: Verdana;
  font-size: 14px;
  font-weight: bold;
}

.container {
  height: 500px;
  width: 500px;
  position: relative;
  overflow: hidden;
}

#image {
  background-image: url('http://i.imgur.com/HoWL6o3.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  position: absolute;
}

#image.blur {
  transform: matrix3d(1, 0, 0, 0,
                      0, 1, 0, 0,
                      0, 0, 1, 0,
                      0, 0, 0, 0.05);
  background-size: 0 0;
}

#image.blur:before {
  transform: scale(0.05);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-image: inherit;
  background-size: contain;
  background-repeat: inherit;
}

<div class="container">
  <div id="image" class="blur"></div>
</div>

Demo: http://codepen.io/rkogan/pen/jPdGoM/