Filters not working in Firefox

[Shikkediel]

Just curious investigation. Not of much use to implement them if IE isn’t playing along – and the special filters seem to not work anymore either :

http://caniuse.com/css-filters

But Firefox should since long have been supporting this, yet nothing is showing on this page :

https://css-tricks.com/almanac/properties/f/filter/

Anybody know why?

[Shikkediel]

Weird, solved already by updating from 34.0 to 36.0.1.

[Senff]

Is it me or are some of the latest versions of Firefox particularly buggy? I’ve seen it quite a few times in the past few weeks where people wonder why something isn’t working (anymore) in Firefox, and then it’s fixed in the next version.

[Shikkediel]

I think they lost focus a bit around v28. If it wasn’t for the oldskool style add-on I would have considered another default browser.

Looks like they got something right since 35 though – blur finally doesn’t need to be referring to an SVG filter anymore so that’s definitely an improvement.

Best recent cross browser info I found

I also suspect that even though in recent versions of IE the special filters don’t work anymore, they might still be functional when viewing the page from the actual legacy browser instead of compatibility mode. So it could be worth including them. Maybe I’ll have a look on my P3 500MHz with XP and IE8…

Edit – Yep

[Shikkediel]

Contrary to what the page (demosthenes.info) I linked to states, there is a workaround to blur an image in IE later than v9 – including it in an SVG :

http://codepen.io/Shikkediel/pen/zxJPpe?editors=110

Source

Moz doc

Just for completeness of information.

[Shikkediel]

Having some cross browser animated blur fun :

http://codepen.io/Shikkediel/pen/vEzqoX

Not sure why it’s not showing here when embedded…
Background-cover-ish responsive svg <image> with a filter. :-)

[Shikkediel]

Is it me or are some of the latest versions of Firefox particularly buggy?

Filters work now but since the last update animations (fading) have suddenly started flickering. Anybody else notice?

[Shikkediel]

The above animation is no longer a hack depending on the animate() progress function but a proper plugin (it’s a first for me, yay) to animate an svg’s Gaussian blur. Usage :

$('#somesvg').blurIt({duration: 2500, final: 0.5})

After an svg is defined in HTML of course.
Final blur factor is 0 by default…

:-)

[Shikkediel]

Filters work now but since the last update animations (fading) have suddenly started flickering. Anybody else notice?

Seems to be fixed now with v37, pfew. Those were a few nasty weeks if you like jQuery animation (and are still stubborn with using Mozilla).

[Author]

Posts