filter: blur(1px); funktioniert nicht in Firefox, Internet Explorer und Opera

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

Ich habe versucht, alle oben genannten Methoden, aber-wie üblich-Internet Explorer /Microsoft Edge wollte, Dinge anders zu machen, so ich konnte es nicht konsistent.

Am Ende hatte ich zu springen, durch eine Reihe von Reifen zu bekommen, es funktioniert, wie ich wollte, für alle modernen Browser:

1. Verwenden Sie die CSS bereits erwähnt, so dass es funktionieren würde, auf nicht-IE-Browser, ohne den Aufwand für das Update musste ich für den IE:

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

2. Erkennen, ob Internet Explorer /Microsoft Edge verwendet wurde, die mit diese JavaScript (danke Mario).

3. Wenn Internet Explorer /Microsoft Edge erkannt wurde, dann laden Sie das Bild in eine versteckte img Feld auf der Seite. Sie haben, dies zu tun mit der onload Funktion stellen Sie sicher, dass das Bild geladen hat, bevor Sie den Betrieb auf, die es sonst im nächsten Schritt fehlschlägt (danke Josh Stodola):

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

4. Verwenden StackBlur JavaScript, das funktioniert unter IE und Edge (Dank Mario Klingemann). Das Bild sollte 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. Wie es passiert, ich wollte das set als hintergrund, also musste ich konvertieren Sie das Bild vor dem einstellen der Daten (Dank user3817470):

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

6. Einmal geladen und verschwommen ich dann verblasst es in mit Hilfe von CSS und ein Transparenz-Klasse wie jQuery fadeTo war nicht auf der Suche großen (Dank Rich Bradshaw):

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

Puh, ich glaube, ich brauche einen Tee Pause (oder vielleicht etwas, was viel stärker!).

Ein Beispiel, dass es funktioniert (Dank Alex78191):

JS:

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

CSS:

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

HTML:

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

Können Sie eine SVG-blur-filter in Gecko-basierten Browsern. Aber die Sache, die Sie haben oben WebKit-only und nicht standardisiert, so dass niemand sonst es unterstützt.