When rotation (via raphael translate) is 180 degrees, filter and element are no longer visible

I have an application in which users manipulate symbols. Symbols are able to be rotated 0, 90, 180 and 270 degrees. I recently switched to using fraphael for the .shadow() feature. It's much nicer than having to deal with .glow() and all the headaches that come along with that. Works great with x,y transforms but it doesn't seem to work when rotating to 180 degrees.

It seems that filters (I've tried a few, same results) just don't want to work on 180. They work at 181 and 179, though.

Video Here: http://tinypic.com/r/2s7c0ll/8 (excuse the tinypic, only service I could get to work)

http://jsfiddle.net/eo2ppha5/2/

Used your previous jsfiddle as a base. 3 rectangles, rotated at 179, 180 and 181.

Hi. Thanks for the report - weird. I'll look into it at some point this weekend and let you know what I find.

Cheers.

Hi,

I've looked into this and confirmed your issue. It seems to me that this is a bug with SVG rendering on Chrome (if you have time it would be useful to report to the Webkit devs).

Specifically, I think that the way Raphael rotates elements causes problems; it uses a transform matrix instead of the simpler "rotate" transformation. I believe you can work around the problem by setting the transform attribute manually:

myRectangle.node.setAttribute("transform", "rotate(180, 125, 125)");

See here: http://jsfiddle.net/eo2ppha5/3/

However, there still seem to be some rendering issues.

Is that helpful?

Ah, interesting that it's a Chrome thing.

I'll try the workaround you've posted later this week.

My current workaround is setting the rotation to 180.01, which works and isn't really noticeable.

Thanks!