Odd mouse handling with transparent objects under Internet Explorer 7

We discovered as soon as we (and our users) got their hands on Internet Explorer 7 that freehand drawing in Thinkature was misbehaving. In particular, we learned that it was only possible to start a drawing in IE7 if the cursor were positioned on top of some other object in the workspace. After the drawing got started (that is, after the initial mousedown event had been handled), everything worked great.

This, naturally enough, caused some wailing and gnashing of teeth. It turns out that the problem stems stemmed from a bug in how IE7 handles JavaScript mouse events (click, mousedown, mouseup, etc.) on transparent/invisible objects. On a blank page, objects with a CSS ‘background-color’ property set to ‘transparent’ or not set at all will not be able to receive mouse events. If that were the entirety of the issue, though, this wouldn’t be a very interesting problem (at least as far as IE bugs go).

Needless to say, there’s a twist. If there’s a non-transparent object below the transparent object, the transparent object becomes clickable within the bounding box of the object below it. Here’s a diagram to illustrate the idea:

In the diagram above the transparent object will respond to mouse events, but only if those events occur over the red box underneath the transparent image. But wait! There’s another catch! Suppose the non-transparent object underneath the transparent object is actually an image (i.e. an img tag). Will the transparent object respond to mouse events over the image? Nope! This only works if the non-transparent object is an opaque (or at least not totally transparent) DOM object that is not an image.

And there’s one more exciting twist to cover. Suppose you assigned a background color to the formerly transparent object, but set its opacity to zero. In IE7, a colored-but-zero-opacity object will receive mouse events just fine. If my memory serves me correctly (and it may not), mouse events won’t reach a zero-opacity object in basically any other browser on the planet. The fix for IE7, then, breaks all other browsers. And so the saga continues.

The moral of today’s story? If you need to handle JavaScript mouse events directed at a transparent object under IE7, you’ll need to make it transparent by (a) assigning it a solid background color and then (b) setting its opacity to zero. Setting ‘background-color: transparent;’ will not work, but the zero-opacity solution may break mouse events in other browsers, so you’ll need to implement some degree of browser detection to make things happy.