Filter: Blur(1Px); Doesn't Work in Firefox, Internet Explorer, and Opera

CSS3 filter doesn't work on Opera,Internet Explorer,Mozilla Firefox

Mozilla Firefox: support without prefix is coming in Firefox 34 according to MDN (stable version currently at 32). For a few weeks, you'll need the SVG filter via url() if I understood well.

Note: if you support Firefox ESR - Extended Support Release - that may be deployed by quite a few IT departments and organizations, Fx 24 ESR won't be supported after october 2014 but Fx 31 ESR will be till mid or end 2015 I guess. (source)

How to make Blur Effect working in IE

You need to extend your blur filter to elements themselves :

.blur, /* do you neeed it too for IE ? */
.blur p, /* extra for IE  */
.blur div/* extra for IE  */
 {
-ms-filter: blur(2px); 
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius='2', shadowopacity='0.0');
}

So maybe the solution is to set the blur filter via class only to childs :), else filter is applied twice on non relative elements.
blur with relative childs buggs

Fix CSS Shadow Issue in Interner Explorer

You can get CSS to test whether filter is supported by the browser in modern browsers. @support isn't supported in IE so it just ignores the setting of the background to black so it's there but not seen.

Here's an example snippet - obviously hasn't got all the right sizing that your code will have.

<style>
  .service_group {}
  
  .uk-box-shadow-bottom {
    position: relative;
  }
  
  .service_group:hover .uk-box-shadow-bottom:before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    border-radius: 100%;
    /*background: #000;*/
    /*filter: blur(20px);*/
    height: 40px;
  }
  
  @supports (filter: blur()) {
    .service_group:hover .uk-box-shadow-bottom:before {
      background: #000;
      filter: blur(20px);
    }
  }
</style>
<div class="service_group">Just some info so I can hover
  <div class="uk-box-shadow-bottom"></div>
</div>

IE/Firefox/Opera not picking up stylesheet - Webkit okay

What's happening is that your CSS file is, in fact, being loaded by every browser, but is only being partially processed by some browsers. This might be because of an improperly formatted stylesheet.

I've determined that these browsers reach line 115, but don't quite make it to 161. I'd try removing selectors in between there until you determine which one is causing problems.

And this is what I did to figure this out:

I opened up your site in Firefox and went to 'Inspect Element.' It was clear to me that the most obvious thing that was getting messed up was your #wrapper div. This thing was styled at around line 160 in your stylesheet, which gave me a line number that it wasn't getting to. I looked around on different elements to find the lowest number it was getting to, and the lowest I found was 115. And that's what I used to infer this solution.

Filter: Blur(1Px); Doesn't Work in Firefox, Internet Explorer, and Opera

CSS3 filter doesn't work on Opera,Internet Explorer,Mozilla Firefox

How to make Blur Effect working in IE

Fix CSS Shadow Issue in Interner Explorer

IE/Firefox/Opera not picking up stylesheet - Webkit okay

Related Topics

Leave a reply