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);

it looks perfect in Safari and Chrome, but the blur doesn't show up at all in Firefox, Opera, or Internet Explorer. Do those browsers support it? Or is there another method of getting the entire page to blur?

Solution 1

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>

Solution 2

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'); 

Solution 3

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/

Solution 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>

Solution 5

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.

View more solutions

Comments

[Thomas Lai]

so is there another method for the rest of the browsers?

[Erik Dahlström]

It is available as a W3C working draft, w3.org/TR/filter-effects/#ltfilter-functiongt. Latest editor's draft here: dvcs.w3.org/hg/FXTF/raw-file/default/filters/….

[Boris Zbarsky]

Sure, but that doesn't mean "standardized". You and I both know the bar for a working draft is incredibly low.

[Erik Dahlström]

I added the links to be helpful, since the poster seemed unsure over where to look for reference - a Working Draft means that anything can still change (and that should be expected). I never claimed that it meant "standardized". It may only be implemented in WebKit right now, but that will hopefully change.

[Anders H]

This worked for me. It's also worth noting you can use this inline without adding an svg file, just by pasting the code and using the format url(#blur) instead. My example: jsbin.com/ulufot/31/edit

[Admin]

For IE8 you'll have to use feGaussianBlur stdDeviation="3"></feGaussianBlur>.

[8steve8]

even better (imo): .svg-only-blur{ filter: url("data:image/svg+xml;utf8,<svg xmlns=\'w3.org/2000/svg\'><filter id=\'blur\' x=\'0\' y=\'0\'><feGaussianBlur stdDeviation=\'3\'/></filter></svg>#blur"); }

[Murhaf Sousli]

worked on chrome&FF but not on IE11, I tried @calvintennant comment, didn't work neither

[Pawel]

@IdanShechter same here. I was expecting that but I'd like to be positively surprised by SVG filter or "filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='‌​3');" but they didn't work either.

[Alex78191]

StackBlur is better