rootMargin only works on initial load

[RobbieTheWagner]

I am trying to use rootMargin: 2000px 2000px 2000px 2000px to load content that is off of the screen, so a few results above and below the containing div should be loaded. This works on initial load, and there are several loaded in results, but when I scroll back up everything has disappeared, so it seems that the rootMargin only works on initial load. I am showing and hiding my content doing something like this:

const observer = new IntersectionObserver(([entry]) => {
      // If intersectionRatio <= 0 it is hidden
      run(() => {
        this.set('viewportEntered', entry.intersectionRatio > 0);
      });
    }, options);

Is entry.intersectionRatio > 0 what I want here? If so, something seems to be not working correctly.

[philipwalton]

Can you clarify whether this is for the polyfill or the native implementation (or both)?

[RobbieTheWagner]

@philipwalton I am not sure. The issue was in Chrome, so I assume it would have used the native one, but I am including the polyfill.

[szager-chromium]

Can you please verify that this is a bug in the native implementation by trying it without including the polyfill?

If it's a bug in the native implementation, then please file a bug (with a reproduction) at crbug.com.

[honsa]

The options are read only, according to this stackoverflow post:

https://stackoverflow.com/questions/49511503/how-to-dynamically-change-intersection-observers-configuration#answer-49511610

[miketaylr]

Right, it is read-only, so this is working as expected. Someone else filed a similar feature request to make this settable at #490, so let's close this in favor of that.

edit: #428 is probably what we want to dupe against.