wnr / element-resize-detector

Optimized cross-browser resize listener for elements.
MIT License
1.32k stars 118 forks source link

Does not work for absolutely positioned elements #80

Closed buschtoens closed 7 years ago

buschtoens commented 7 years ago

Apparently absolutely positioned elements are incompatible.

https://jsbin.com/veyulajohu/3/edit?html,css,js,output

#watched {
  box-sizing: border-box;
  position: absolute;
  top: 10%;
  left: 10%;

  height: 80%;
  width: 80%;
  padding: 3em;

  background: red;
}
var erd = elementResizeDetectorMaker({
  strategy: "scroll" 
});

var el = document.getElementById("watched");

erd.listenTo(el, function(element) {
  var width = element.offsetWidth;
  var height = element.offsetHeight;
  el.innerText = width + " x " + height;
});
wnr commented 7 years ago

Hi, it does work for absolute elements. The line el.innerText = width + " x " + height; nukes the content of the element that you are trying to observe, which then removes the listener mechanics. If you replace that line with a console.log for instance, you will see that it does work.