Use parentNode to listen, not the element itself

Perhaps this is an edge case that I am seeing, but if the element has a defined height and width, the object DOM node will not detect a difference, and consequently will not trigger an event.

Here is what my DOM node looks like:

<div class="ReactTabs__TabPanel ReactTabs__TabPanel--selected" role="tabpanel" id="react-tabs-51" aria-labelledby="react-tabs-50" style="position: relative; height: 212px;">
    <div style="background: red; width: 100%; height: 100%;"></div>
    <object style="display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1; opacity: 0;" class="resize-sensor" type="text/html" data="about:blank"></object>
</div>

In this example, you can see that the root element has a height of 212px. When the parent div (not shown in this example) is dragged and resized, because the 'panel' div already has a height associated with it, it will not trigger an event.

I'd like to propose a solution: attach the object DOM node into the parentNode of the element:

// https://github.com/KyleAMathews/element-resize-event/blob/master/index.js#L73
    element.parentNode.appendChild(obj)  // line 78 & line 73

Here is what the DOM would look like after the change:

Here is a screenshot with current implementation:

KyleAMathews / element-resize-event

Use parentNode to listen, not the element itself #22