I'm attempting to add a Gaussian blur effect to an element that contains some child nodes with content.
In Chrome, I successfully applied the blur using the following style:
-webkit-filter: blur(2px);
Unfortunately, Firefox does not support this method. However, Firefox does allow for applying SVG effects to HTML content. In my search for a solution, I came across an example on how to achieve a Gaussian blur effect using SVG in Firefox. You can check out this post and demo.
Here is the CSS code I created:
#div-with-content{
-webkit-filter: blur(2px);
filter: url('#blur');
}
I then added the following code to the corresponding HTML file:
<svg:svg>
<svg:filter id="blur">
<svg:feGaussianBlur stdDeviation="2"/>
</svg:filter>
</svg:svg>
However, when I tested the page, the div-with-content element vanished once the blur was applied. It reappeared when I removed the blur style. I have exhausted all my knowledge trying to troubleshoot this issue. Any assistance would be greatly appreciated.