I'm having a strange issue while experimenting the dropshadow.raphael.js plugin based on raphael blur plugin (I tried with the css filter plugin, same issue).
I am drawing a Bezier path and adding the dropshadow :
var borderBottomRounded = paper.path("M150,100C20,200,600,200,400,100");
borderBottomRounded.attr({'stroke':'#000000', 'stroke-width':'1'});
borderBottomRounded.dropShadow(1,0,1,0.5); // dropShadow(size, offsetX, offsetY, opacity = 1)
There, the shadow is working fine on every browser (haven't tried IE yet).
Than I'm drawing a straight line, with the same shadow like this :
var borderBottom = paper.path("M 0,100 L800, 100");
borderBottom.attr({'stroke':'#000000', 'stroke-width':'1'});
borderBottom.dropShadow(1,0,1,0.5);
$content
is my raphael paper
because I want it to take the whole width. I'am not able to use viewport
for what I'm doing.
But this path simply disappear on Firefox or Opera (working great with webkit browser).
How may I fix this issue ? For the moment, I'm just disabling the shadow on this line for Firefox and Opera, but I'm trying to find a better way of doing this...
See a live example on fiddle.
Another try with the css filter plugin.
Included jQuery 1.9.1, Raphael 2.1.0 and the raphael dropshadow plugin.
Edit
Fixed by using a rect instead of a line, because the element needs to have a height when applying a filter (thanks Robert Longson) :
var borderBottom = paper.path("M 0,100 H800 v1 H0 Z");
borderBottom.attr({'fill':'#000000', 'stroke-width':'0'});
Working fiddle.