I am using IntersectionObserver to produce animations on my website and it behaves as expected on browser widths > 460px.

However, when the browser width is <= 460px, the About component is not intersecting and being shown. The Projects and Contact component are intersecting and animating just fine.

App.jsx:

return (
    <ChakraProvider>
      <div className="App">
        <div className="container">
          <Navbar />
          <Hero />
          <div className="hidden">
            <About />
          </div>
          <div className="hidden">
            <Projects />
          </div>
          <div className="hidden">
            <Contact />
          </div>
        </div>
      </div>
    </ChakraProvider>
  );

My logic for the IntersectionObserver

  // Animations for fade-ins
  useEffect(() => {
    // Ensure that all the elements are on the DOM before creating observer
    if (!isLoading) {
      // Create an observer
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            console.log("Intersecting:", entry.target);
            entry.target.classList.add("show");
          }
        });
      });

      // Assign observer to all hidden elements
      const hiddenElements = document.querySelectorAll(".hidden");
      console.log("Hidden elements:", hiddenElements);
      hiddenElements.forEach((el) => observer.observe(el));
    }
  }, [isLoading]); // Ensure that this function runs when isLoading changes

I’ve inspected my website and I can see that the About component and Hero component do not overlap. Intersecting is being logged to the console only for Projects and Contact.