Get the element that triggered AOS custom event

Question

I have several elements that trigger a custom event when they are inview (entered the viewport) with the latest Animate On Scroll library (https://github.com/michalsnik/aos).

https://codepen.io/anon/pen/vMGQEb

HTML:

<div class="foo" data-aos data-aos-id="inview">
  Foo 1
</div>
<div class="foo" data-aos data-aos-id="inview">
  Foo 2
</div>

JS:

// Init AOS
AOS.init();

// Toggle red color    
document.addEventListener('aos:in:inview', function(e) {
   e.detail.classList.add('text-red');
});

CSS:

.text-red {
  color: red !important;
}

This simple script is suppposed to paint the foo elements red when they enter a viewport. It works just fine everywhere but Edge and IE. As far as I can tell, e.detail doesn't return a DOM element, but some object I have no idea what to do about.

Any ideas?