Tag Archives: Raphael

Event-handling bug in IE7/8 with Raphaël

Recently I’ve been using the Raphael Javascript library for creating complex browser-based visualisations. Mostly it’s been a positive experience – but the development cycle conforms to the standard pattern of getting everything looking pretty in the standards-compliant browsers, and then setting aside a couple of days to get the thing working in the IE family of browsers.

Generally speaking, Raphael does an amazing job of porting nice, clean, standards-compliant SVG over to IE 6/7/8’s horrendous native RVML format support. But ironing the kinks out of my viz application did manage to flush out one IE bug that Raphael doesn’t handle: IE does not register events bound to SVG paths when their opacity is set to zero. Rects, circles, and yes, even ellipses, will trigger events when transparent. But paths won’t.

Fortunately the fix is simple: assigning the path an opacity of 0.01 allows it to trigger and has no visible manifestation on-screen.

It’s an ugly hack. And it’s not necessary for IE9, which does offer SVG support. But for the moment it does the job.