Why elementFromPoint() does not return a DOM element when used within an iframe on IE 11?

Question

I have a document (child) nested within a (parent) frame using an iframe.

I need to retrieve a DOM element with mouse coordinated in the child using [elementFromPoint()][1] from the parent.

Script works fine on latest Chrome and Firefox but on IE 11 it returns always null.

I need to know what could be the problem using IE and a possible solution or work around.

Notes: script does not work on IE even if the document are on the same domain.

Example here, please click orange box: http://jsbin.com/masusekude/1/

document.getElementById('main').addEventListener('click', function (e) {
                    var elm = document.getElementById('iframe').contentDocument.elementFromPoint(e.pageX, e.pageY);
                    alert(elm);
                }.bind(this));

Answer 1

I found what was wrong in my case, maybe you check yours too. In my case, I have an div element that was hiding the iframe content and capturing the mouse movements.

What I could see is that, in IE, if you have an HTML element that is in front of the iframe content, calling 'iframe.contentWindow.elementFromPoint(x, y)' will return null in that case.

The fix for my issue was to hide that div just to call the elementFromPoint and show it back again after that.