Regression for blur effect in Firefox

[eeshaan]

https://github.com/Niels-IO/next-image-export-optimizer/blob/78435e719aec4606551c14033b1dff11dcd53c14/src/ExportedImage.tsx#L132

The above line results in the blur effect not applying because the URL #sharpBlur is not found.

[Niels-IO]

Hi @eeshaan,

Thanks for submitting. The bug is harder to fix than expected. I found out that Firefox will not apply the blur filter as it has display:none applied. Changing to position: "absolute",height: 0 works instead.

Somehow the blurred placeholder image will not show up completely, only the section of the image that is loaded already: I tried to search for it and haven't found a viable solution. Interestingly, if you stop all network requests at that point in the screenshot above and change a property of the img element, the blurred placeholder shows at its full height.

https://user-images.githubusercontent.com/47059882/198227131-a5582d72-669f-4c8c-8cab-e8c7b22db170.mov

[Niels-IO]

Removed SVG filter in v1.10.0