Intersection Observer API not working with hidden elements

Question

I am trying to observe a hidden element. I have an element which has style set to display: none. I want when my element intersect it will perform my action i.e: Play the video. I am sharing my sample code below

 var options = {threshold: 0.5 }     

 var circle = document.getElementById('content_video');

 var observer = new IntersectionObserver(entries => {
     var [{ isIntersecting }] = entries
     if (isIntersecting) {
         player.play();
         player.ima.getAdsManager().resume();
     } else {
         player.ima.getAdsManager().pause();
     }
 }, options);

 window.addEventListener('load', () => {
     if ('IntersectionObserver' in window) observer.observe(circle);
 }, false);

Answer 1

This is normal behaviour, because element with display:none cannot be reached and ignoring by browser

Try set other styles instead display:none. Example, use opacity or width and height 0 with overflow: hidden

Answer 2

Unfortunately if your goal is to use the intersection observer to lazy load the media, the answer will not fulfil the purpose since the media will load before it intersects with the viewport. The solution is to make sure it is the containing element of the media that is being observed, instead the element on which display none is being applied.

https://codesandbox.io/s/react-lazyload-forked-yz93f?file=/src/LazyLoad.js:0-958

import React, { Component, createRef } from "react";

import "./styles.css";

class LazyLoad extends Component {
  observer = null;
  rootRef = createRef();
  state = {
    intersected: false
  };

  componentDidMount() {
    this.observer = new IntersectionObserver(
      (entries) => {
        const entry = entries[0];
        if (entry.isIntersecting) {
          this.setState({ intersected: true });
          this.observer.disconnect();
        }
      },
      { root: null, threshold: 0.2 }
    );
    this.observer.observe(this.rootRef.current);
    console.log(this.rootRef);
  }

  render() {
    return (
      <div className="outer" ref={this.rootRef}>
        <span>{JSON.stringify(this.state.intersected)}</span>
        <div
          className={`container ${
            this.state.intersected ? "d-block" : "d-none"
          }`}
        >
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default LazyLoad;