Positive rootMargin doesn't seem to work

[adam-lynch]

I want to trigger the intersection observer early, let's say 100px early, but I can't seem to. I'm testing in Chrome & Firefox.

If I set rootMargin to 0px 0px -100px, it doesn't fire until I scroll down 100 pixels late / past the top of the element as expected. Pen: https://codepen.io/adam-lynch/pen/GMBeVj.

But if I set rootMargin to 0px 0px 100px, it doesn't fire early and seems to behave exactly the same as if I set rootMargin to 0px. Pen: https://codepen.io/adam-lynch/pen/eGjoXY.

If I set rootMargin to 100px 0px 0px, it doesn't fire early and seems to behave exactly the same as if I set rootMargin to 0px. Pen: https://codepen.io/adam-lynch/pen/VMBNRW.

This might be related to #157 but I'm not sure.

[philipwalton]

Since this is against the native implementation and not the polyfill, it's best to file bugs against the browsers themselves rather than against the spec.

That being said, I see the issue you're pointing out in CodePen, but I can't reproduce it when running the exact same test in a plain HTML file. Since CodePen runs these in an iframe, maybe there's some issue there.

Either way, it's probably best to file an issue with the individual browsers.

[adam-lynch]

OK no prob.

Weird, it now works for me in a plain HTML file too. Now to see why it didn't work originally in our app... Thanks!

[adam-lynch]

It turned out to be CSS that was the problem in our app. Our body hadoverflow: hidden. Inside, we had an element (B) which was statically positioned at the top of the screen and another element (C) which had overflow: auto (so this was the element being scrolled). It's within this element C that the observed element (D) exists.

I've removed overflow: hidden from the body, gave B fixed positioning, and removed overflow: auto from C. This fixed it.

So maybe it's do with how overflow: auto affects rendering / calculation under the hood.

[parkjoon]

Sorry to revive such an old post but just in case someone is stumbling across this from Google, my issue was that if the root element is in an iframe (which is the case with JSFiddle!), then it has to be given an explicit overflow: auto/scroll for the root margins to work properly.

[mindplay-dk]

my issue was that if the root element is in an iframe (which is the case with JSFiddle!), then it has to be given an explicit overflow: auto/scroll for the root margins to work properly

@parkjoon any chance you could share a link to a working fiddle?

Nothing I can come up with (in a fiddle) works in the current version of Chrome 😐

[mr21]

Well i had exactly the probleme described, and yes the codepen iframe was not working, but even in a plain .html file, rootMargin was not working for positive value.

But if i set the root option with the correct element which scroll, then it's works well :)

[michaelrafailyk]

But sometimes we need to use overflow: hidden, especially overflow-x: hidden, so overflow: auto/scroll is not a panacea unfortunately 😕