Intersection Observer not firing even when get() or scrollIntoView etc.

[bculley]

Current behavior:

Getting or scrolling into view an intersection observer does not trigger intersection and loading of content inside intersection observer.

Desired behavior:

Would like to be able to have Intersection Observer render content on scroll such that intersection is observed and content renders. Would then be able to get() content inside IntersectionObserver.

Versions

Chrome 73
Cypress 3.1.5
Mac OS Mojave

[bculley]

OK, so it does work kinda. I had to trick it to make the intersection happen by scrolling past it once so that we go past the intersection, then go find it again. I also had to use the duration of the scrollIntoView() method to slow it down so that the intersection occurs. Hope this helps someone.

[callebstrom]

@bculley Hi! I seem to have stumbled across the same issue. What is odd is that it only occurs on CI (Jenkins on Linux + electron). Did you have to exaggerate the offsets and durations? I still had no luck with 500 duration and an offset bigger than my viewport (scrolling past the given element).

[tamj0rd2]

I'm also having similar issues with the intersection API in cypress. The rootMargins don't seem to have any effect unless I double them. I've tested the functionality in a several browsers using Browserstack and can't reproduce it. It only seems to be an issue when viewing the page in cypress

[maciekgrzybek]

@tamj0rd2 I'm having exactly the same issue. Cypress completely ignores rootMargin property. Everything works fine when I run my app normally.

[sunfit]

Same issue here.

What is strange is that it works in Electron 78 bundled with Cypress, but does not work with Chrome 80 that I have on my machine.

This issue should not be Closed.

[raylenmargono]

We are running into the same issue with chrome. Anyone have a solution to this?

[lorenries]

You can mock the window.IntersectionObserver api to manually set isIntersecting to true on all observer entries:

cy.visit(url, {
  onBeforeLoad: (win) => {
    win.IntersectionObserver = function (cb, options) {
      const instance = {
        thresholds: Array.isArray(options.threshold)
          ? options.threshold
          : [options.threshold],
        root: options.root,
        rootMargin: options.rootMargin,
        time: Date.now(),
        observe: (element) => {
          const entry = [
            {
              isIntersecting: true,
              boundingClientRect: element.getBoundingClientRect(),
              intersectionRatio: 1,
              intersectionRect: element.getBoundingClientRect(),
              rootBounds: instance.root
                ? instance.root.getBoundingClientRect()
                : {},
              target: element,
              time: Date.now(),
            },
          ];
          cb(entry);
        },
        unobserve: () => undefined,
        disconnect: () => undefined,
      };
      return instance;
    };
  },
}

[wthegamer]

Same issue here.

What is strange is that it works in Electron 78 bundled with Cypress, but does not work with Chrome 80 that I have on my machine.

This issue should not be Closed.

@jennifer-shehane I can confirm the same experience above. Would it be possible to reopen this issue?

[AskMarvinV]

Same issue here.
What is strange is that it works in Electron 78 bundled with Cypress, but does not work with Chrome 80 that I have on my machine.
This issue should not be Closed.

@jennifer-shehane I can confirm the same experience above. Would it be possible to reopen this issue?

same here...

[shawnveltman]

Hey all - I was running into this issue as well, and found that adding in a concrete duration to the scroll made it work.

EG:

cy.get('#terms_and_conditions').scrollTo('bottom', {duration: 300});

[jennifer-shehane]

Can anyone provide a reproducible example of an app where intersection observer is affected with Cypress? Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.