Issue with mousemove in Internet Explorer

Question

Internet explorer does not fire onmousemove events when the event target is positioned over an <img> element and lacks a background.

But it does register the event when the target has a background. Does anyone have an explanation for this? I had the same behavior in IE10, IE9, and IE8.

Fiddle here: http://jsfiddle.net/xSpqE/2/

Answer 1

As OP asked for a reason, here's my breakthrough:

It's easier to explain visually, so first off let's add a click handler to the imgs:

$('img').click(function() {
  $('.pageX').text('img clicked!');
});

Fiddle

Fair enough. You click the image in Chrome/Firefox/not-IE browsers and nothing will happen as the absolutely positioned div covers it.

Now try it on IE. The img's click handler is fired! Therefore it shows that IE pushes elements through absolutely positioned "transparent" (no content or background) elements. More interestingly, relatively positioned elements suffer the same issue and setting z-index on either/both elements won't solve it either. Of course, as the image is above the overlay, it won't trigger the overlay's mousemove event.

An workaround is to provide some "filling" to the overlay, say background:rgba(0,0,0,0) will force IE to keep the absolutely positioned element at the top. Fiddle. If you need to support browsers without rgba support, use a 1x1px transparent gif as background.

I've never seen this defined in any spec nor officially reported as a bug. There's no logic or reason for absolutely positioned elements without content nor background to suffer this z-index issue, hence I'll call it yet another IE bug. Maybe reporting it on the Microsoft forums would be of use.

Also, related question: IE bug: absolutely-positioned element with a non-transparent background colour