¿Cómo aplicar el efecto blur() de manera consistente en diferentes navegadores?
Hay una diferencia en la representación del efecto de desenfoque en Firefox y Chrome.
Para un valor pequeño como filter: blur(30px), Chrome y Firefox producen casi el mismo desenfoque Gaussiano.
Pero para un valor grande como filter: blur(200px), estos navegadores tienen una diferencia muy notable.
Aquí hay un ejemplo de eso en 4 imágenes: (FF a la izquierda, Chrome a la derecha)
(El sitio web mostrado es https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function He editado el máximo del control deslizante a 200 en las herramientas de desarrollo)
0px de desenfoque: igual
30px de desenfoque: igual
100px de desenfoque: similar
200px de desenfoque: diferente
Parece que Firefox aplica el desenfoque solo dentro de las dimensiones originales, mientras que Chrome amplía el área de aplicación del desenfoque y “filtra” el “blanqueamiento” de afuera hacia adentro. Esa observación puede estar equivocada, sin embargo.
Mi pregunta en SO es: “¿Cómo puedo obtener un efecto de desenfoque coherente en todos los navegadores?”
davy.ai
Diferencia en la representación del efecto de desenfoque en Firefox y Chrome
Existe una diferencia notable en la representación del efecto de desenfoque entre Firefox y Chrome, especialmente para valores grandes como
filter: blur(200px).Mientras que Chrome amplía el área de aplicación del desenfoque y “filtra” el “blanqueamiento” de fuera hacia dentro, Firefox aplica el desenfoque solo dentro de las dimensiones originales.
Para obtener un efecto de desenfoque consistente en todos los navegadores, se requiere experimentación y pruebas adicionales. Una posible solución podría ser limitar el tamaño máximo de desenfoque utilizado en el diseño o utilizar un enfoque diferente como los filtros SVG.