once:true with addEventListener doesn't work on IE11 or Edge

Question

I'm trying to fire an event listener callback just once. addEventListener conveniently has a flag that I can pass into it:

once: A Boolean indicating that the listener should be invoked at most once after being added. If it is true, the listener would be removed automatically when it is invoked.

This works fantastic in every browser except IE11 and Edge. I know that I can manually remove the event listener after it fires, but this flag should work... Am I doing something wrong, or is this an acknowledged issue with IE or what?

Should you prefer JSFiddle, otherwise:

var div = document.getElementById('transition');
var result = document.getElementById('result');

window.grow = function(){
  var width = div.offsetWidth + 50;
  div.style.width = width + 'px';
}

var count = 0;
div.addEventListener('transitionend', function(){
  result.innerHTML = "transitionend has fired " + ++count + " times";
}, { once: true });

#transition{
  background-color: yellow;
  transition: width 2s;
  width: 100px;
}

<div id="transition">
  Content
</div>
<button onclick="grow()">
  Grow the div
</button>
<div id="result">

</div>

Answer 1

Check the browser compatibility section of the docs: no IE/edge support. caniuse is also helpful.