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 Thinkaturewas misbehaving. In particular, we learned that it was only possible tostart a drawing in IE7 if the cursor were positioned on top of someother object in the workspace. After the drawing got started (that is,after the initial mousedown event had been handled), everything workedgreat.

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

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

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

And there’s one more exciting twist to cover. Suppose you assigned abackground color to the formerly transparent object, but set itsopacity to zero. In IE7, a colored-but-zero-opacity object will receivemouse events just fine. If my memory serves me correctly (and it maynot), mouse events won’t reach a zero-opacity objectin 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 mouseevents directed at a transparent object under IE7, you’ll need to makeit 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-opacitysolution may break mouse events in other browsers, so you’ll need toimplement some degree of browser detection to make things happy.