Обозреватель пересечения не работает в Edge

Question

У меня есть проблема, когда мне нужно получить данные, когда пользователь прокручивает страницу вниз. Для решения этой проблемы я использую intersection Observer. И он работает в Chrome, Firefox, Opera и Safari, но он не работает в Edge по причине, которую я не понимаю (и также нет ошибки).

Вот то, что должно быть

А вот и Edge (нет Loading...)

• Я поместил console.log внутри функции handleObserver (внутри оператора if (this.state.prevY > y) {}) -> в Edge она не сработала

• И я пытался ссылаться на цель по id вместо this.loadingRef - результат был тот же.

Вот мой компонент реакции:

/**
 * App main react component
 */
export default class Main extends Component {
  state = {
    cards: [],
    isFetching: false,
    page: 1,
    prevY: 0,
    sortValue: 'name',
    searchValue: '',
    prevSearchValue: '',
    numberLoaded: null,
  };

  /**
   * Initial data fetch
   */
  componentDidMount() {
    this.getCards(this.state.page);

    // Options
    const options = {
      root: null, // Page as root
      rootMargin: '0px',
      threshold: 1.0,
    };
    // Create an observer
    this.observer = new IntersectionObserver(
        this.handleObserver.bind(this), // callback
        options
    );
    // Observe the `loadingRef`
    this.observer.observe(this.loadingRef);
  }

  /**
   * Callback for Intersection Observer
   */
  handleObserver(entities, observer) {
    const y = entities[0].boundingClientRect.y;
    if (this.state.prevY > y) {
      const curPage = this.state.page + 1;
      this.getCards(curPage, this.state.sortValue, this.state.searchValue);
      this.setState({page: curPage});
    }
    this.setState({prevY: y});
  }

  /**
   * Data fetch
   */
  getCards(page, sortValue = 'name', searchValue = '') {
   //... code
  }

  /**
   * Renders component
   */
  render() {
    const loadingCSS = {
      height: '10px',
      marginTop: '0',
      width: '1px',
    };
    const {cards, isFetching, numberLoaded} = this.state;
    return (
      <main className="l-main">
        <h1 className="t1">
          MTG Creatures{numberLoaded && ` (${numberLoaded} loaded)`}
        </h1>
        {!isFetching && cards.length === 0 && (
          <p className="t0">No cards have been found</p>
        )}

        {/* code */}

        {cards.length !== 0 && <Cards cards={cards} />}
        <div
          ref={(loadingRef) => (this.loadingRef = loadingRef)}
          style={loadingCSS}
        >
          {isFetching && <Loader />}
        </div>
      </main>
    );
  }
}

За предложение в MS Edge: IntersectionObserver. Работает ли это для вас? Я пытался добавить min-width, min-height и рамку -> у меня не получилось