rootMargin not working until after the first time intersecting

[stramel]

Bug Report

Describe the Bug

The rootMargin is being ignore until after the first time the IntersectionObserver fires isIntersecting.

How to Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Provide custom rootMargin and custom ref
2. Scroll down
3. Observe the isIntersecting is false until the element is visible.
4. Scroll down again
5. Observe the isIntersecting is true at the expected rootMargin

CodeSandbox Link

https://codesandbox.io/s/react-cool-inviewissues495-0g4yk

Expected Behavior

Should respect the rootMargin on the initial scroll

Screenshots

Your Environment

• Device: MacBook Pro
• OS: macOS X
• Browser: Chrome
• Version: v1.2.2

[wellyshen]

@stramel Thank you for reporting this issue, I know the root cause, will fix it soon!

[stramel]

Thank you for reporting this issue, I know the root cause, will fix it soon!

Thanks! Just wanted to confirm that it is still an issue with v1.3.0 https://codesandbox.io/s/react-cool-inviewissues495-with-v130-zosed

[wellyshen]

@stramel I copied your example to debug this issue with the latest version in my project (created by CRA) but I can not reproduce it, I'm not sure whether it only exists in the environment of the codesandbox (due to the issue of iframe) or not. Can it be reproduced in your project side?

[stramel]

@wellyshen It does appear that it works properly in a CRA environment. So this probably isn't a bug with the library but maybe one with the browser's Intersection Observer implementation.

I did notice, that it looks like the state isn't reset properly?

The inView says true after the observe is called and the new ref has been set. As well as, the scrollDirection is resetting to 'up' even though I never scrolled up.

https://github.com/stramel/react-cool-inview-issue-495

[wellyshen]

@stramel That make sense, I will fix the scrollDirection part soon.

[wellyshen]

@stramel The scrollDirection should be reset in v2.0.1.

[stramel]

Going to close this issue in favor of a new one to show the other issues that I have found with scrollDirection and inView.

[wellyshen]

@stramel Thank you bro, your issues really helpful.

[stramel]

Thanks for the cool 😎 library! 👍🏼