Event doesn't fire in MS Edge

KyleAMathews commented 9 years ago

Hi, thanks for the big report. Any idea why things aren't working?

ejfrancis commented 9 years ago

Not sure why it isn't firing but here's the example I'm using. I pulled it out of it's npm package just to make it a simple single file demo. The event gets fired and logged in Chrome, Firefox and Safari, but not Edge

<html>
<head>
</head>
<body>
<div id="test">this is the test div</div>
</body>
<script type="text/javascript">

var ElementResizeEvent =  function(element, fn) {
  var window = this;
  var document = window.document;

  var attachEvent = document.attachEvent;
  if (typeof navigator !== "undefined") {
    var isIE = navigator.userAgent.match(/Trident/);
  }

  var requestFrame = (function() {
    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function(fn) {
        return window.setTimeout(fn, 20);
      };
    return function(fn) {
      return raf(fn);
    };
  })();

  var cancelFrame = (function() {
    var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
      window.clearTimeout;
    return function(id) {
      return cancel(id);
    };
  })();

  function resizeListener(e) {
    var win = e.target || e.srcElement;
    if (win.__resizeRAF__) {
      cancelFrame(win.__resizeRAF__);
    }
    win.__resizeRAF__ = requestFrame(function() {
      var trigger = win.__resizeTrigger__;
      trigger.__resizeListeners__.forEach(function(fn) {
        fn.call(trigger, e);
      });
    });
  }

  function objectLoad(e) {
    this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
    this.contentDocument.defaultView.addEventListener('resize', resizeListener);
  }

  if (!element.__resizeListeners__) {
    element.__resizeListeners__ = [];
    if (attachEvent) {
      element.__resizeTrigger__ = element;
      element.attachEvent('onresize', resizeListener);
    } else {
      if (getComputedStyle(element).position == 'static') {
        element.style.position = 'relative';
      }
      var obj = element.__resizeTrigger__ = document.createElement('object');
      obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
      obj.setAttribute('class', 'resize-sensor');
      obj.__resizeElement__ = element;
      obj.onload = objectLoad;
      obj.type = 'text/html';
      if (isIE) {
        element.appendChild(obj);
      }
      obj.data = 'about:blank';
      if (!isIE) {
        element.appendChild(obj);
      }
    }
  }
  element.__resizeListeners__.push(fn);
};

ElementResizeEvent(document.getElementById("test"), function(){
    console.log('resized!');
})

</script>
</html>

ejfrancis commented 9 years ago

looking at the MSDN docs for the resize event, it's kind of a mess https://msdn.microsoft.com/en-us/library/ms536959%28v=vs.85%29.aspx

As of Internet Explorer 9, the type of the event object passed to a function handling the resize event varies:

When the event is fired from the window object, the event object is a standards-based Event object.

When the event is fired from an element and the handler was assigned using the onresize attribute, the event object is a legacy event object supported by Windows Internet Explorer 8 and earlier versions of Windows Internet Explorer.

When the event is fired from an element and the handler was assigned using the attachEvent method, the event object is a legacy event object.

For pages displayed in legacy document modes (IE8 Standards mode and earlier), the event object is a legacy event object..

In Windows 8.1 and later versions, the resize event fires when the window size changes or when one of the following properties changes:

AdjacentToLeftDisplayEdge

AdjacentToRightDisplayEdge

IsFullScreen

They recommend listening on the window, not specific elements

For best results, we recommend using addEventListener to register your event handlers. This means you'll use the window object, rather than any element object: JavaScript

 window.addEventListener("resize", handler, useCapture);

This library claims to work in all browsers (haven't tried it myself), it looks like it listens for the scroll event instead of resize https://github.com/marcj/css-element-queries

davidenglishmusic commented 8 years ago

I found that a quick adjustment to the isIE variable resolved the issue. As 'Trident' is no longer included in the user agent string for Edge, adding a second condition to capture 'Edge' did the trick:

var isIE = navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/Edge/);

I have opened a pull request for it.

klamping commented 7 years ago

Just confirmed that this event now fires in Edge and this issue can probably be closed.

eaglus commented 6 years ago

Just confirmed that this event now fires in Edge and this issue can probably be closed. i've checked it on latest Edge - everything works. close as fixed

KyleAMathews / element-resize-event

Event doesn't fire in MS Edge #5