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

Share Improve this question Follow asked Jul 13, 2017 at 21:05 Peter DPeter D 6322 silver badges44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.