In this post I will show a technique that we use to make cross-browser blur-effect. You can use this solution with any framework as it’s completely library-independent and it actually uses 1 line of JS code.

With the latest versions of top notch browsers like Google Chrome, Firefox and Safari, you can always achieve blur-effect using CSS3 “filter”-property:

.cover-image {
  filter: blur(12px);
}

IE10+

For previous versions of IE we were able to use DX Filters (alternative to CSS3 filter-property), but starting from IE10 Microsoft removed their support and didn’t present anything instead. That’s why for now the only way to make blur-effect in IE10+ is to use SVG. Here is an example of how it could look like:

<svg width="300" height="180">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="12" />
    </filter>
  </defs>
  <image xlink:href="{url}" width="300" height="180" filter="url(#blur)"></image>
</svg>

Making a demo

The idea here is to render markup for both solutions: CSS3 and SVG, but show only one that actually works in user’s browser.

<!-- modern browsers -->
<div class="cover blur" style="background-image: url({url})"></div>
<!-- IE -->
<svg class="blur-ie">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="12" />
    </filter>
  </defs>
  <image xlink:href="{url}" width="300" height="180" filter="url(#blur)"></image>
</svg>

In order to reduce complexity I used browser-detection in CSS, which is possible because with JS we can store browser’s userAgent as an attribute of html tag and in CSS we can actually use stored information to perform a detection. With this solution you don’t need to change anything in CSS or JS in order to add few more places with blur-filter. Here is an example of what I mean:

JS:

document.documentElement.setAttribute("data-agent", navigator.userAgent)

CSS:

/* IE10+ detection */
html[data-agent*="Trident"] .blur-wrapper .blur {
  display: none;
}
/* IE10+ detection */
html[data-agent*="Trident"] .blur-wrapper .blur-ie {
  display: block;
}

Check out our example here: https://jsbin.com/guyoyodapa/edit?html,css,js,output.

Advices and warnings

1. If you’re developing a single page application, it might be a good idea to store that HTML somewhere as a template and use it every time when you need it.
2. Be careful using blur on iOS with native scroll, as seems it seriously reduces scrolling FPS.

Hope this post was useful for you. Thanks for reading!