Before anyone goes to too much effort here, I already have a nasty workaround. I just want to know if anyone has it working.

Version 15 of Edge is now released and has support for intersection observer (for lazy loading).

I've implemented it and it works fine in all browsers which support it (Chrome and Opera. Firefox and Safari haven't implemented yet) but not at all in Edge.

There are no errors thrown, but the callback is never called.

handleIntersectionElement(elm) {
  if (elm && this.state.enabled && !this.observer) {
    this.observer = new global.IntersectionObserver(this.intersectionCallback, this.options);
    this.observer.observe(elm);
  }
}

Options as follows, nothing special:

options = { root: null, rootMargin: '100px', threshold: [0] };

This is part of a React ponent but don't see why that should make a difference.

Before anyone goes to too much effort here, I already have a nasty workaround. I just want to know if anyone has it working.

Version 15 of Edge is now released and has support for intersection observer (for lazy loading).

I've implemented it and it works fine in all browsers which support it (Chrome and Opera. Firefox and Safari haven't implemented yet) but not at all in Edge.

There are no errors thrown, but the callback is never called.

handleIntersectionElement(elm) {
  if (elm && this.state.enabled && !this.observer) {
    this.observer = new global.IntersectionObserver(this.intersectionCallback, this.options);
    this.observer.observe(elm);
  }
}

Options as follows, nothing special:

options = { root: null, rootMargin: '100px', threshold: [0] };

This is part of a React ponent but don't see why that should make a difference.

• javascript
• microsoft-edge
• intersection-observer

1 Answer 1

IntersectionObserver can't observe empty elements which width and height are both 0 in Edge, so the only thing you need do is setting 1px border or min-width: 1px; min-height: 1px; on the element that you want to observe.