examples - filtros css

filter: blur(1px); no funciona en Firefox, IE y Opera

Question

Tengo un problema con CSS: cuando trato de hacer

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

se ve perfecto en safari y cromo, pero la borrosidad no aparece en absoluto en Firefox, Opera o IE. ¿Los navegadores lo admiten? ¿O hay otro método para hacer borrosas toda la página?

Answer 1

Aquí hay una nueva técnica de desenfoque que funciona en todos los navegadores (incluido IE 10/11) y no requiere filtros, lienzo o JavaScript.

La técnica básica es reducir el tamaño de la imagen, luego usar una matriz de escalado 3D en el elemento principal para volver al tamaño completo. Esto minimiza efectivamente la imagen y produce un efecto borroso aproximado.

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>

Demostración: http://codepen.io/rkogan/pen/jPdGoM/

Answer 2

Eso suena correcto, es actual compatible con:

• Chrome 18+
• Chrome para Android 25+
• Safari 6+
• iOS Safari 6+
• Navegador Blackberry 10+

Reference

Aquí hay un artículo de David Walsh (trabaja en Mozilla) sobre filtros específicos de IE, por ejemplo t motion blur

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

Parece que el soporte de desenfoque normal es irregular con IE y no estoy sorprendido, especialmente antes de 9.

Answer 3

Probé todos los métodos anteriores, pero como siempre, Internet Explorer / Microsoft Edge quería hacer las cosas de manera diferente, así que no pude conseguirlo de manera consistente.

Al final tuve que saltar a través de una serie de aros para hacer que funcionara como quería en todos los navegadores modernos:

1. Utilice el CSS ya mencionado para que funcione en navegadores que no sean IE sin la sobrecarga de la corrección que tuve que usar para IE:

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

2. Detecta si Internet Explorer / Microsoft Edge se estaba utilizando con este JavaScript (gracias Mario).

3. Si se detectó Internet Explorer / Microsoft Edge, cargue la imagen en un campo de img oculto en la página. Tienes que hacer esto usando la función de carga para asegurarte de que la imagen se cargó antes de operarla; de lo contrario, el siguiente paso falla (gracias a Josh Stodola):

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

4. Utilice StackBlur JavaScript que funciona en IE y Edge (gracias Mario Klingemann). La imagen debe estar disponible por 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. Da la casualidad que quería establecer como fondo, así que tuve que convertir la imagen antes de configurar los datos (gracias user3817470 ):

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

6. Una vez cargado y difuminado, lo desvanecí al usar CSS y una clase de transparencia, ya que jQuery fadeTo no se veía muy bien (gracias a Rich Bradshaw):

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

¡Uf, creo que necesito un descanso para el té (o tal vez algo mucho más fuerte!).

Una muestra de lo que está funcionando (gracias 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 4

Pruebe con el filtro SVG.

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 5

Puede hacer un filtro de desenfoque SVG en los navegadores basados ​​en Gecko. Pero lo que tienes arriba es solo WebKit y no está estandarizado, por lo que nadie más lo admite.

Answer 6

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