Is rootMargin working?

[kuworking]

In the recipe for lazy loading images here https://github.com/thebuilder/react-intersection-observer/blob/master/docs/Recipes.md#lazy-image-load I haven't been able to observe any effect related to rootMargin

This is, images were loading always when barely seen, not before or after

How is this supposed to work?

*In the link example in https://codesandbox.io/embed/lazy-image-load-mjsgc one has to "false"fy the native image loading browser capabilities to test this - in both files (and remove the loading prop)

 const supportsLazyLoading = false;

And the margin has also to be corrected to rootMargin (I assume)

EDIT: I can see that it is working in other examples where I am triggering animations, but with the one of images It seems to be ignored (?)

[thebuilder]

Hey

So rootMargin being called margin is clearly a mistake.
But yeah, it does seem like it doesn't work as it should even then. Will need to investigate what's going on here.

[kuworking]

Thanks for the fast reply, and fantastic plugin, just substituted my own implementation for this one and couldn't be happier

It does work if used for triggering animations, maybe it doesn't work if the browser is capable of lazy loading images and makes this a forced behavior (🤷‍♂️)

[thebuilder]

Thanks! Tested it in Firefox where it also happens, so something's up with it.

[kuworking]

Without images involved, I am now testing 4 divs that are appearing at '-300px 0px', '-400px 0px', '-500px 0px', '-600px 0px', and the last two are never triggered (regardless of any scroll)

From previous experiments, it seems that above a certain (negative) value it doesn't get triggered

[juanpprieto]

Hey @thebuilder, we are also experiencing problems with rootMargin being ignored.

Here we are setting rootMargin:Bottom to 702px which should render the next two items on the grid (Red box), but for some reason they are not being detected as InView. The only go InView when the first pixel comes into view.

P.S: Negative bottom margin seems to be working ok.

[thebuilder]

Digging into this a bit, the problem is that Codesandbox runs inside an iframe - this breaks rootMargin. If you open the example outside the iframe, you'll see it's working as intended:
https://mjsgc.csb.app/

An issue around this can be found here:
w3c/IntersectionObserver#283

If you want the root margin to apply to the iframe element's boundary, then you'll have to use an observer with an explicit root, which should be document.scrollingElement within the iframe. If you also need to compute intersection with the top-level viewport (the implicit root), that will require a second observer.

[juanpprieto]

Digging into this a bit, the problem is that Codesandbox runs inside an iframe - this breaks rootMargin. If you open the example outside the iframe, you'll see it's working as intended:
https://mjsgc.csb.app/

An issue around this can be found here:
w3c/IntersectionObserver#283

If you want the root margin to apply to the iframe element's boundary, then you'll have to use an observer with an explicit root, which should be document.scrollingElement within the iframe. If you also need to compute intersection with the top-level viewport (the implicit root), that will require a second observer.

Thanks for looking into this @thebuilder! Just for clarification, the build (on the screen above) was not running inside Codesanbox. The strange thing is that negative bottom margin value does seem to work as expected.

Let me know if there's anything you'd like me to try.

Thanks again and stay safe.

[juanpprieto]

@thebuilder @kuworking I think I've found the problem (And as I expected, it was at my end).

For marginRoot bottom to work the root/target element must be the scrolling container. I realized we were passing null instead of the correct element ref so it was defaulting to using null/document.documentElement as the target.

hope this helps those coming from the future.

thanks again @thebuilder for the quick response.

[thebuilder]

I'll add a note to the FAQ regarding this issue, but otherwise it should be working according to the browser implementation.

[kuworking]

Maybe I'm not understanding well how it should work

For instance, I have my landing page (https://github.com/kuworking/kuworking-theme-landing-one) and I have 3 elements that appear at the same rootMargin: -100px 0px, with the root target being the default one

Being like this, it works as intended

Then, if I write for each element -100px, -250px and -500px, the third one is never triggered

[thebuilder]

The margin is for both top and bottom, so with -500px your viewport needs to be more than 1000px tall for it to trigger. Looks like less in the examples?

[thebuilder]

You can use a percentage offset instead. That would make it relative to the viewport size.

[kuworking]

You were right 🙌🙌

Yet it is a bit unintuitive in the sense that a margin: -51% 0 will never be triggered, and one could suppose that if he is scrolling top to down, then margin-bottom is irrelevant (that's what I thought at least)

Thanks! (I close the issue then)

[Zloka]

@juanpprieto I seem to be running into the same issue you described. Do you happen to have a code snippet to share? I can't seem to wrap my head around it 🙁

[thebuilder]

@juanpprieto I seem to be running into the same issue you described. Do you happen to have a code snippet to share? I can't seem to wrap my head around it 🙁

• Are you setting root?
• Is it rendered inside an <iframe>?

Can you share the an example on Codesandbox?

[Zloka]

@thebuilder I went over how I assigned root and noticed a mistake. Lesson learned, don't code (or raise issues) while tired. Thanks for the quick reply and handy useInView hook, works as expected now 😌

[Radivarig]

Why isn't iframe automatically handled? const isFramed = window.self !== window.top