iFrame Overlay mousemove event works in Chrome but not Internet Explorer

Question

Description:

I need to access individual elements in an iframe when you hover over them in a transparent overlay. This is for a Online HTML editing software.

It works fine on Chrome/Firefox, but not on Internet Explorer (I'm testing with IE10)

I've recreated the problem in jsfiddle here: demo

HTML:

<div id="frame-content">
    <iframe id="frame" style="width: 800px; background:transparent;" allowtransparency="true"></iframe>
    <div id="overlay"></div>
</div>

jQuery:

$(function () {
    var iframe = $("#frame")[0];
    var iframewindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;
    $(iframewindow.document).find("body").append("<img src='http://quickbase.intuit.com/blog/wp-content/uploads/2011/02/CampsBaySunset.jpg'/>");

    $("#overlay").mousemove(function (e) {
        console.log("x:" + (e.pageX) + ", y:" + (e.pageY));
    });
});

CSS:

   #frame-content {
       overflow: auto;
       position: relative;
       width: 100%;
       height: 600px;
       display: block;
       top: 43px;
   }
   #frame-content iframe {
       transition: 0.1s linear;
       -moz-transition: 0.1s linear;
       -webkit-transition: 0.1s linear;
       background-color: #fff;
       border: 0;
       z-index: 1;
       border-radius: 0px;
       -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       position:relative;
       display: block;
       margin: 0 auto;
       margin-bottom:-5000px;
       height: 5000px;
   }
   #overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       min-height: 100%;
       z-index: 2;
       -webkit-touch-callout: none;
       -webkit-user-select: none;
       -khtml-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       height:5000px;
   }

Why doesn't the mousemove event fire when over the image on Internet Explorer?

Answer 1

Could be related to the way IE handles mouse events on empty elements. Try adding a background to your overlay to force its rendering:

#overlay {
     background-color:rgba(0,0,0,0);
}

Or maybe a transparent gif bg for older versions.